/* =====================================================================
   GOATS — header, hero reels, how-to-order phone, GOATS TV rail, video lightbox
   ===================================================================== */
html{scroll-padding-top:112px}

/* ---------- announcement ticker ---------- */
.announce{overflow:hidden;height:32px;display:flex;align-items:center;color:#0a0a0a;font-size:12.5px;font-weight:700;
  background:linear-gradient(90deg,var(--hl),var(--pink),var(--sun),var(--pink),var(--hl));background-size:300% 100%;animation:annBg 14s linear infinite;transition:height .35s var(--ease)}
.ann-track{display:flex;gap:22px;width:max-content;white-space:nowrap;animation:marquee 48s linear infinite}
.ann-track i{font-style:normal;opacity:.6}
[dir=rtl] .ann-track{animation-direction:reverse}
.announce:hover .ann-track{animation-play-state:paused}
.topbar.scrolled .announce{height:0}
@keyframes annBg{to{background-position:-300% 0}}

/* ---------- header bar ---------- */
.topbar .bar{height:68px;gap:20px}
.top-actions{gap:8px}
.top-cta{min-height:40px;padding:6px 18px}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--hl),var(--pink));transform:scaleX(0);transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.menu-btn{display:none;align-content:center;justify-items:center;gap:5px}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
.menu-open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:1100px){.nav{gap:18px;font-size:13px}}
@media (max-width:900px){.menu-btn{display:grid}}
@media (max-width:600px){.top-cta{display:none}.topbar .bar{gap:10px}}

/* ---------- mobile menu ---------- */
.mmenu{position:fixed;inset:0;z-index:49;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow-y:auto;
  padding:120px 24px calc(28px + env(safe-area-inset-bottom,0px));background:rgba(10,10,10,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.menu-open .mmenu{opacity:1;visibility:visible}
.mm-links{display:grid;gap:4px}
.mm-links a{font-size:clamp(28px,8vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.25;opacity:0;translate:0 24px;transition:opacity .5s var(--ease),translate .5s var(--ease)}
[dir=rtl] .mm-links a{letter-spacing:0}
.menu-open .mm-links a{opacity:1;translate:0 0}
.mm-links a:nth-child(2){transition-delay:.04s}.mm-links a:nth-child(3){transition-delay:.08s}.mm-links a:nth-child(4){transition-delay:.12s}
.mm-links a:nth-child(5){transition-delay:.16s}.mm-links a:nth-child(6){transition-delay:.2s}.mm-links a:nth-child(7){transition-delay:.24s}
.mm-links a:first-child{background:linear-gradient(90deg,var(--hl),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.mm-foot{display:grid;gap:18px}
.mm-social{display:flex;gap:24px;justify-content:center;color:var(--muted);font-weight:600;font-size:14px}

/* ---------- hero: stacked reels ---------- */
.hero-reels{position:relative;width:100%;max-width:520px;aspect-ratio:1/1.08;justify-self:end;
  translate:calc(var(--mx,0) * 14px) calc(var(--my,0) * 14px);transition:translate .4s var(--ease)}
.anim .hero-reels{animation:photoIn 1.3s var(--ease) 1.05s both}
.reel-card{position:absolute;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#111;border:1px solid var(--line2);box-shadow:0 30px 60px rgba(0,0,0,.6);cursor:pointer}
.reel-card video{width:100%;height:100%;object-fit:cover;display:block}
.rc-main{width:56%;left:22%;top:0;z-index:2;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06),0 0 90px rgba(139,123,255,.28)}
.rc-l,.rc-r{width:41%;top:13%;filter:brightness(.7);transition:filter .3s,rotate .4s var(--ease)}
.rc-l{left:0;rotate:-9deg}
.rc-r{right:0;rotate:9deg}
.rc-l:hover,.rc-r:hover{filter:none}
.rc-l:hover{rotate:-6deg}.rc-r:hover{rotate:6deg}
.rec{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);font:700 10px/1 Poppins,sans-serif;letter-spacing:.12em;color:#fff}
.rec i{width:7px;height:7px;border-radius:50%;background:#ff3b5c;animation:recBlink 1.2s ease-in-out infinite}
@keyframes recBlink{50%{opacity:.25}}
.reel-ui{position:absolute;inset:auto 0 0 0;display:grid;gap:2px;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;text-align:left}
.reel-ui b{font-size:13px}
.reel-ui small{font-size:11px;color:#cfcfcb;letter-spacing:.06em}
.hero-reels .spin-badge{top:auto;bottom:4%;inset-inline-start:-4%;z-index:3}
.hero-reels .chip-float{z-index:4;translate:calc(var(--mx,0) * -26px) calc(var(--my,0) * -26px);transition:translate .4s var(--ease)}
.hero-reels .chip-float.c1{left:auto;right:-6px;bottom:14%}
.hero-reels .chip-float.c2{right:auto;left:-6px;top:6%}
@media (max-width:960px){.hero-reels{justify-self:center;max-width:430px}}
@media (max-width:640px){
  .hero{padding-top:30px}
  .hero .lead{font-size:15px;line-height:1.6}
  .hero-ctas{margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-ctas .btn{padding-inline:12px;font-size:14px}
  .hero-points{display:none}
  .hero .wrap{gap:28px}
  .hero-reels{max-width:360px;margin-top:6px}
  .rc-main{border-radius:22px}.rc-l,.rc-r{border-radius:18px}
  .hero-reels .spin-badge{bottom:2%;inset-inline-start:0}
  .hero-reels .chip-float{font-size:12px;padding:8px 13px}
  .hero-reels .chip-float.c1{right:0}.hero-reels .chip-float.c2{left:0}
}

/* graded = off-theme reels recoloured to the GOATS palette; posters are pre-graded, so grade only once playing */
video.graded.started{filter:hue-rotate(25deg) saturate(1.2) contrast(1.9) brightness(.68)}

/* ---------- how to order: phone ---------- */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:32px;align-items:center}
.how-grid .steps{grid-template-columns:repeat(3,1fr)}
.phone{margin:0;justify-self:center;width:100%;max-width:290px;display:grid;gap:14px;text-align:center}
.phone-screen{aspect-ratio:9/16;border-radius:38px;border:9px solid #1d1d1d;overflow:hidden;background:#000;cursor:pointer;
  box-shadow:0 0 0 1px var(--line2),0 30px 70px rgba(0,0,0,.6),0 0 90px rgba(139,123,255,.25)}
.phone video{width:100%;height:100%;object-fit:cover;display:block}
.phone figcaption{font-size:13px;color:var(--muted);font-weight:600}
@media (max-width:1024px){.how-grid{grid-template-columns:1fr}.how-grid .steps{grid-template-columns:repeat(3,1fr)}.phone{max-width:250px}}
@media (max-width:640px){.how-grid .steps{grid-template-columns:1fr 1fr}}

/* ---------- GOATS TV rail ---------- */
.tv{padding-bottom:80px}
.tv .sec-head{margin-bottom:28px}
.tv-nav{display:grid;gap:12px;justify-items:end}
.tv-nav p{margin:0}
[dir=rtl] .tv-nav{justify-items:start}
.tv-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:8px max(16px, calc((100vw - 1200px) / 2 + 20px)) 22px;scroll-padding-inline:max(16px, calc((100vw - 1200px) / 2 + 20px));scrollbar-width:none}
.tv-rail::-webkit-scrollbar{display:none}
.tv-card{flex:none;width:clamp(170px,21vw,240px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;position:relative;scroll-snap-align:start;
  background:#111;border:1px solid var(--line);padding:0;transition:translate .35s var(--ease),rotate .35s var(--ease),border-color .2s,box-shadow .3s}
.tv-card video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tv-card .cap{position:absolute;inset:auto 0 0 0;padding:48px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.88));color:#fff;font-weight:700;font-size:14px;line-height:1.3;text-align:start;direction:auto}
.tv-card .play{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:grid;place-items:center;font-size:11px;color:#fff;transition:opacity .25s}
.tv-card.is-playing .play{opacity:0}
.tv-card:hover,.tv-card:focus-visible{translate:0 -6px;rotate:-1.2deg;border-color:var(--hl);box-shadow:0 20px 50px rgba(139,123,255,.25)}
.l-ar{display:none}
[dir=rtl] .l-ar{display:inline}
[dir=rtl] .l-en{display:none}
@media (max-width:640px){.tv-nav .row{display:none}.tv-card{width:62vw;max-width:260px}}

/* ---------- design library ---------- */
.tabs{grid-template-columns:repeat(6,1fr)}
@media (max-width:640px){.tabs{grid-template-columns:repeat(3,1fr)}}
.des-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:420px;overflow:auto;padding-bottom:2px}
.des{display:grid;gap:4px;justify-items:center;padding:8px 6px;border:1px solid var(--line2);border-radius:14px;background:var(--bg);font-size:11px;font-weight:600;line-height:1.2;text-align:center;transition:transform .2s var(--ease),border-color .2s}
.des img{width:100%;aspect-ratio:1/1;object-fit:contain}
.des span{overflow-wrap:anywhere}
.des:hover{border-color:var(--hl);transform:translateY(-3px) rotate(-1deg)}
.drop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.drop-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
.drop-card .mock-bg{border-radius:14px}
.drop-art{max-width:96%;max-height:96%;object-fit:contain;display:block}
.drop-info{display:grid;gap:2px}
.drop-info h3{font-size:16px}
.drop-card .btn{width:100%;margin-top:auto}
.drop-tabs{margin-bottom:22px}
.drop-tabs .chip{height:40px;padding:0 18px;font-size:14px}
.drop-grid.couples{grid-template-columns:repeat(2,1fr)}
.couple-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.couple-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.couple-btns .btn{width:100%}
@media (max-width:1024px){.drop-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.drop-grid.couples{grid-template-columns:1fr}}
@media (max-width:640px){.drop-grid{grid-template-columns:1fr 1fr;gap:10px}.drop-card{padding:8px;border-radius:16px}.drop-info h3{font-size:14px}}

/* ---------- video lightbox ---------- */
.vbox{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.94);display:none;place-items:center;padding:20px}
.vbox.open{display:grid;animation:fadeUp .35s var(--ease)}
.vbox video{max-height:88vh;max-width:100%;width:min(460px,100%);aspect-ratio:9/16;border-radius:22px;background:#000}
.vbox-close{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));inset-inline-end:16px;background:#151515;z-index:2}

@media (prefers-reduced-motion:reduce){.announce,.ann-track{animation:none!important}}