/* ==========================================================================
   Rockaway Brewing — Custom Styles
   ========================================================================== */

/* --- Base Typography --- */
body {
  font-family: 'NP-Reg', Helvetica, sans-serif;
  background-color: rgb(17, 24, 39);
}

em,
strong {
  font-family: 'NP-Bold', Helvetica, sans-serif;
}

h1 {
  font-family: 'NP-Reg', Helvetica, sans-serif;
}

/* --- Header --- */
header {
  background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52) 0%, rgba(117, 19, 93, 0.93) 90%, rgba(17, 24, 39, 1));
  height: 400px;
  background-size: cover;
  padding: 20px;
  background-position: center center;
}

/* --- Instagram Section --- */
#instagram-section {
  background-image: url('../img/blue-stroke.png');
  height: 85px;
  background-size: 40%;
  padding: 20px;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --- Utility Classes --- */
.alignLeft  { text-align: left; }
.alignRight { text-align: right; }

.bull {
  color: #7fff00;
}

/* --- Navigation Buttons --- */
.nav-button {
  background-color: #DB005F;
  display: inline-block;
  text-decoration: none;
}

/* --- Animations --- */
.rotate   { animation: rotation 4s; }
.linear   { animation-timing-function: linear; }
.infinite { animation-iteration-count: infinite; }

@keyframes rotation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(359deg); }
}

@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  80%  { transform: rotate(0deg); }
  85%  { transform: rotate(5deg); }
  95%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.wiggle {
  display: inline-block;
  animation: wiggle 2.5s infinite;
  overflow: hidden !important;
}
.wiggle:nth-child(1) { animation-delay: 2.1s; }
.wiggle:nth-child(2) { animation-delay: .7s; }
.wiggle:nth-child(3) { animation-delay: 3s; }

.annoyx {
  position: absolute;
  top: 30%;
  left: 30px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% { transform: translate(100%, -100%); }
}

/* --- Live "Now Pouring" Indicator --- */
.live-dot {
  width: 10px;
  height: 10px;
  background: #7fff00;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* --- Scroll Entrance Animations --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Beer Style Color Accents --- */
.beer-card[data-style="ipa"]     { border-top: 3px solid #f59e0b; }
.beer-card[data-style="stout"]   { border-top: 3px solid #78350f; }
.beer-card[data-style="pilsner"] { border-top: 3px solid #fbbf24; }
.beer-card[data-style="sour"]    { border-top: 3px solid #ec4899; }
.beer-card[data-style="lager"]   { border-top: 3px solid #fcd34d; }
.beer-card[data-style="wheat"]   { border-top: 3px solid #fde68a; }

/* --- Beer Detail Hero --- */
.beer-hero {
  position: relative;
  text-align: center;
  padding: 2rem;
}

.beer-hero-info {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto 0;
}

/* --- Holographic Card Effect (for flagship beers) --- */
.card[data-rarity="rare holo"] .card__shine {
  --space: 2px;
  --h: 21;
  --s: 70%;
  --l: 50%;
  --bars: 24px;
  --bar-color: rgba(255, 255, 255, 0.6);
  --bar-bg: rgb(10, 10, 10);

  clip-path: inset(10% 8.5% 52.5% 8.5%);

  background-image:
    repeating-linear-gradient( 90deg,
      hsl(calc(var(--h)*0), var(--s), var(--l)) calc(var(--space)*0), hsl(calc(var(--h)*0), var(--s), var(--l)) calc(var(--space)*1),
      black calc(var(--space)*1.001), black calc(var(--space)*1.999),
      hsl(calc(var(--h)*1), var(--s), var(--l)) calc(var(--space)*2), hsl(calc(var(--h)*1), var(--s), var(--l)) calc(var(--space)*3),
      black calc(var(--space)*3.001), black calc(var(--space)*3.999),
      hsl(calc(var(--h)*2), var(--s), var(--l)) calc(var(--space)*4), hsl(calc(var(--h)*2), var(--s), var(--l)) calc(var(--space)*5),
      black calc(var(--space)*5.001), black calc(var(--space)*5.999),
      hsl(calc(var(--h)*3), var(--s), var(--l)) calc(var(--space)*6), hsl(calc(var(--h)*3), var(--s), var(--l)) calc(var(--space)*7),
      black calc(var(--space)*7.001), black calc(var(--space)*7.999),
      hsl(calc(var(--h)*4), var(--s), var(--l)) calc(var(--space)*8), hsl(calc(var(--h)*4), var(--s), var(--l)) calc(var(--space)*9),
      black calc(var(--space)*9.001), black calc(var(--space)*9.999),
      hsl(calc(var(--h)*5), var(--s), var(--l)) calc(var(--space)*10), hsl(calc(var(--h)*5), var(--s), var(--l)) calc(var(--space)*11),
      black calc(var(--space)*11.001), black calc(var(--space)*11.999),
      hsl(calc(var(--h)*6), var(--s), var(--l)) calc(var(--space)*12), hsl(calc(var(--h)*6), var(--s), var(--l)) calc(var(--space)*13),
      black calc(var(--space)*13.001), black calc(var(--space)*13.999),
      hsl(calc(var(--h)*7), var(--s), var(--l)) calc(var(--space)*14), hsl(calc(var(--h)*7), var(--s), var(--l)) calc(var(--space)*15),
      black calc(var(--space)*15.001), black calc(var(--space)*15.999),
      hsl(calc(var(--h)*8), var(--s), var(--l)) calc(var(--space)*16), hsl(calc(var(--h)*8), var(--s), var(--l)) calc(var(--space)*17),
      black calc(var(--space)*17.001), black calc(var(--space)*17.999),
      hsl(calc(var(--h)*9), var(--s), var(--l)) calc(var(--space)*18), hsl(calc(var(--h)*9), var(--s), var(--l)) calc(var(--space)*19),
      black calc(var(--space)*19.001), black calc(var(--space)*19.999),
      hsl(calc(var(--h)*10), var(--s), var(--l)) calc(var(--space)*20), hsl(calc(var(--h)*10), var(--s), var(--l)) calc(var(--space)*21),
      black calc(var(--space)*21.001), black calc(var(--space)*21.999),
      hsl(calc(var(--h)*11), var(--s), var(--l)) calc(var(--space)*22), hsl(calc(var(--h)*11), var(--s), var(--l)) calc(var(--space)*23),
      black calc(var(--space)*23.001), black calc(var(--space)*23.999),
      hsl(calc(var(--h)*12), var(--s), var(--l)) calc(var(--space)*24), hsl(calc(var(--h)*12), var(--s), var(--l)) calc(var(--space)*25),
      black calc(var(--space)*25.001), black calc(var(--space)*25.999),
      hsl(calc(var(--h)*13), var(--s), var(--l)) calc(var(--space)*26), hsl(calc(var(--h)*13), var(--s), var(--l)) calc(var(--space)*27),
      black calc(var(--space)*27.001), black calc(var(--space)*27.999),
      hsl(calc(var(--h)*14), var(--s), var(--l)) calc(var(--space)*28), hsl(calc(var(--h)*14), var(--s), var(--l)) calc(var(--space)*29),
      black calc(var(--space)*29.001), black calc(var(--space)*29.999),
      hsl(calc(var(--h)*15), var(--s), var(--l)) calc(var(--space)*30), hsl(calc(var(--h)*15), var(--s), var(--l)) calc(var(--space)*31),
      black calc(var(--space)*31.001), black calc(var(--space)*31.999)
    ),
    repeating-linear-gradient( 90deg,
      var(--vio), var(--blu), var(--gre), var(--yel), var(--red), var(--vio)
    ),
    repeating-linear-gradient( 90deg,
      var(--bar-bg) calc(var(--bars)*2), var(--bar-color) calc(var(--bars)*3), var(--bar-bg) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*4), var(--bar-bg) calc(var(--bars)*5), var(--bar-bg) calc(var(--bars)*12)
    ),
    repeating-linear-gradient( 90deg,
      var(--bar-bg) calc(var(--bars)*2), var(--bar-color) calc(var(--bars)*3), var(--bar-bg) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*4), var(--bar-bg) calc(var(--bars)*5), var(--bar-bg) calc(var(--bars)*9)
    ),
    radial-gradient(
      farthest-corner circle
        at var(--mx) var(--my),
        rgba(230, 230, 230, 0.85) 0%,
        rgba(200, 200, 200, .1) 25%,
        rgb(0, 0, 0) 90%
    );

  background-blend-mode: soft-light, soft-light, screen, overlay;
  background-position: center, calc(((50% - var(--posx)) * 25) + 50%) center, calc(var(--posx)*-1.2) var(--posy), var(--pos), center;
  background-size: 100% 100%, 200% 200%, 237% 237%, 195% 195%, 120% 120%;
  filter: brightness(calc((var(--hyp) + 0.7)*0.7)) contrast(3) saturate(.35);
}

/* --- Print Styles --- */
@media print {
  body { background: white; color: black; }
  header, footer, nav, .no-print { display: none; }
  .animate-on-scroll { opacity: 1; transform: none; }
}