/* ============================================================
   FONTS
============================================================ */
@font-face {
  font-family: 'Benzin';
  src: url('../fonts/Benzin-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Benzin';
  src: url('../fonts/Benzin-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Benzin';
  src: url('../fonts/Benzin-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Benzin';
  src: url('../fonts/Benzin-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Benzin';
  src: url('../fonts/Benzin-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   RESET & ROOT
============================================================ */
:root{
  --red: #d74a4a;
  --white: #e8e7e5;
  --black: #101010;
  --buy-grad-bottom: #953433;
  --buy-grad-top: #ff3737;
  --buy-border: #bd4342;
  --ease: cubic-bezier(.65,0,.35,1);
  --ease-pop: cubic-bezier(.2,1.4,.4,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{
  margin:0; padding:0;
  width:100%; height:100%;
  background: #e8e7e5;
  color: var(--white);
  font-family: 'Benzin', sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
a{ color:inherit; text-decoration:none; }

/* Kill the browser's default focus ring (was showing as a stray white/blue
   box around nav links after a click); keep a subtle ring for keyboard-only
   navigation so accessibility isn't lost. */
a, button{ outline: none; -webkit-tap-highlight-color: transparent; }
a:focus, button:focus{ outline: none; }
a:focus-visible, button:focus-visible{
  outline: 1.5px solid rgba(232,231,229,.6);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   SITE SHELL — the black "card" inset within a white page margin
============================================================ */
.site-shell{
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--black);
}

/* ============================================================
   GRAIN OVERLAY
============================================================ */
.grain{
  position: absolute;
  inset: -100px;
  background-image: url('../images/Grain.webp');
  background-repeat: repeat;
  background-size: 380px 380px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9999;
}

/* ============================================================
   CORNER SHAPES — the COMPLETE, unmodified 1920x1080 reference
   assets (never cropped/windowed — that's what broke the curve).
   object-fit:cover + object-position anchors the relevant corner
   exactly, and the shell's own overflow:hidden trims whatever
   extends past the viewport (just plain margin, nothing lost).
============================================================ */
.logo-shape-bg{
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity .3s ease;
}
.site-shell.on-page-0 .logo-shape-bg{ opacity: 1; }

.next-shape-bg{
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
  z-index: 2;
}

/* Aspect-locked anchors: reproduce the SAME 1920x1080 proportions the
   background images use, so a percentage position inside them lands on
   the exact same spot as in the source art, regardless of the shell's
   own (different) aspect ratio — this is what object-fit:cover uses
   internally, so mirroring it here keeps the text perfectly aligned. */
.logo-anchor{
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  aspect-ratio: 422.24 / 1080;
  pointer-events: none;
  z-index: 600;
}
.next-anchor{
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  aspect-ratio: 422.24 / 1080;
  pointer-events: none;
  z-index: 4;
}

/* ============================================================
   NAVBAR
============================================================ */
.navbar{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 3.2vw, 56px);
}

.logo{
  position: absolute;
  top: 6.11%;
  left: 18.95%;
  transform: translateY(-50%);
  color: var(--white);
  font-family: 'Benzin', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
  display: block;
  pointer-events: auto;
  transition: color .3s ease;
}
.site-shell.on-page-0 .logo{ color: var(--black); }

.nav-links{
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-link{
  position: relative;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 400;
  color: var(--white);
  padding-bottom: 12px;
  transition: opacity .25s var(--ease);
  opacity: .78;
}
.nav-link:hover{ opacity: 1; }
.nav-link.is-active{ opacity: 1; }
.nav-link.is-active::after{
  content:'';
  position:absolute;
  left: 50%;
  bottom: -4px;
  width: 140%;
  height: 8px;
  transform: translateX(-50%);
  background-image: url('../images/RedLineCategory.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.nav-right{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin-left: auto;
  margin-right: clamp(10px, 2vw, 40px);
}
.x-link svg{ width: 20px; height: 20px; color: var(--white); display:block; }

.buy-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--buy-border);
  border-radius: 10px;
  padding: 6px 28px;
  min-width: 96px;
  box-shadow: 0 0 0px rgba(255,55,55,0);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.buy-btn:hover{
  box-shadow: 0 0 22px rgba(255,55,55,.35);
  transform: translateY(-1px);
}

.ca-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1.5px solid var(--buy-border);
  border-radius: 10px;
  padding: 6px 18px;
  box-shadow: 0 0 0px rgba(255,55,55,0);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .2s var(--ease);
}
.ca-btn:hover{
  box-shadow: 0 0 22px rgba(255,55,55,.35);
  transform: translateY(-1px);
}
.ca-btn.is-copied{ border-color: #6fd08c; }
.ca-btn span{
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  transform: translateY(2px);
  background: linear-gradient(180deg, var(--buy-grad-top) 0%, var(--buy-grad-bottom) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.ca-copy-icon{
  width: 13px;
  height: auto;
  display: block;
  filter: invert(28%) sepia(64%) saturate(2476%) hue-rotate(340deg) brightness(93%) contrast(89%);
  transition: opacity .2s var(--ease);
}
.ca-btn:active .ca-copy-icon{ opacity: .6; }
.buy-btn span{
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  transform: translateY(2px);
  background: linear-gradient(180deg, var(--buy-grad-top) 0%, var(--buy-grad-bottom) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   SECTIONS / SCREEN FRAMEWORK
============================================================ */
#sections{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.screen{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--black);
  visibility: hidden;
  will-change: transform, opacity;
}
.screen.is-active{ visibility: visible; z-index: 2; }
.screen.is-incoming{ visibility: visible; z-index: 3; }

.halo{
  position:absolute;
  left:0; right:0; bottom:-10%;
  height:55%;
  background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(255,255,255,.16), rgba(255,255,255,0) 72%);
  pointer-events:none;
}

/* ============================================================
   SECTION 1 — HOME
============================================================ */
#home{ background: var(--black); }

.win-bg-text{
  position:absolute;
  left:50%; top:52%;
  transform: translate(-50%,-50%);
  width: min(1230px, 84vw);
  height: auto;
  opacity: 0;
  z-index: 1;
}
.win-text-glyph{
  font-family: 'Benzin', sans-serif;
  font-weight: 800;
  font-size: 460px;
  letter-spacing: -8px;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.35));
}

.win-bg-mobile{
  display: none !important;
}

.polpi-home{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(40px) scale(.82);
  height: 96%;
  width: auto;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
}

.swipe-bottom{
  position: absolute;
  right: 6%;
  bottom: 6%;
  width: 110px;
  height: 130px;
  z-index: 5;
  cursor: pointer;
}

/* --- Home entrance sequence --- */
#home.play-intro .polpi-home{
  animation: polpiPop 1.05s var(--ease-pop) .15s forwards;
}
#home.play-intro .win-bg-text{
  animation: winFade 1s var(--ease) .85s forwards;
}

@keyframes polpiPop{
  0%{ opacity: 0; transform: translateX(-50%) translateY(40px) scale(.78); }
  70%{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1.03); }
  100%{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes winFade{
  0%{ opacity: 0; transform: translate(-50%,-50%) scale(.96); }
  100%{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes fadeInSimple{
  0%{ opacity: 0; }
  100%{ opacity: 1; }
}
@keyframes fadeUp{
  0%{ opacity: 0; transform: translateX(-50%) translateY(14px); }
  100%{ opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   SECTION 2 — CONCEPT
============================================================ */
#concept{ background: var(--black); }

.whitehouse{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-40%);
  width: 85%;
  min-width: 900px;
  object-fit: contain;
  z-index: 1;
  opacity: .4;
}

.polpi-concept{
  position: absolute;
  right: 0;
  bottom: 0;
  height: 92%;
  width: auto;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
  transform: translateX(60px);
}
#concept.play-intro .polpi-concept{
  animation: slideFromRight .85s var(--ease) .25s forwards;
}
@keyframes slideFromRight{
  0%{ opacity:0; transform: translateX(90px); }
  100%{ opacity:1; transform: translateX(0); }
}

.concept-copy{
  position: absolute;
  left: clamp(24px, 5vw, 90px);
  top: 110px;
  z-index: 3;
  max-width: 520px;
}
.concept-copy::before{
  content: '';
  position: absolute;
  left: -40px;
  top: -40px;
  width: calc(100% + 40px);
  height: calc(100% + 80px);
  background: linear-gradient(90deg, rgba(16,16,16,.55) 0%, rgba(16,16,16,.3) 60%, rgba(16,16,16,0) 100%);
  z-index: -1;
  pointer-events: none;
}

.concept-title{
  position: relative;
  margin: 0 0 26px 0;
  height: 84px;
}
.concept-title .solid{
  position: absolute;
  left: 0; top: 0;
  font-family: 'Benzin', sans-serif;
  font-weight: 800;
  font-size: 64px;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  color: var(--white);
  z-index: 2;
}
/* Simple CSS text-stroke — Chromium has a known rendering bug where the
   "T" gets a stray diagonal line through it (a quirk of this specific
   font's glyph outline combined with stroke-only rendering), but it's
   a minor cosmetic nit and the client prefers this over a more complex
   workaround that risked the border not showing at all. */
.concept-title .ghost{
  position: absolute;
  left: 0; top: 0;
  font-family: 'Benzin', sans-serif;
  font-weight: 800;
  font-size: 64px;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
  transform: translate(10px, 14px) scale(1.08);
  z-index: 1;
}
#concept.play-intro .concept-title .solid{
  animation: dropIn .7s var(--ease) .1s forwards;
}
#concept.play-intro .concept-title .ghost{
  animation: dropIn .7s var(--ease) .22s forwards;
}
@keyframes dropIn{
  0%{ opacity: 0; transform: translateY(-46px); }
  100%{ opacity: 1; transform: translateY(0); }
}
#concept.play-intro .concept-title .ghost{
  animation-name: dropInGhost;
}
@keyframes dropInGhost{
  0%{ opacity: 0; transform: translate(10px, -32px) scale(1.08); }
  100%{ opacity: .6; transform: translate(10px, 14px) scale(1.08); }
}

.concept-paragraph{
  opacity: 0;
  transform: translateX(-50px);
}
#concept.play-intro .concept-paragraph{
  animation: slideFromLeft .75s var(--ease) .35s forwards;
}
@keyframes slideFromLeft{
  0%{ opacity: 0; transform: translateX(-56px); }
  100%{ opacity: 1; transform: translateX(0); }
}
.concept-paragraph p{
  font-family: 'Benzin', sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--white);
  margin: 0 0 11px 0;
  opacity: .92;
}
.concept-paragraph strong{ font-weight: 700; }

.next-btn{
  position: absolute;
  inset: 0;
  z-index: 4;
  color: var(--black);
  display: block;
  pointer-events: none;
}
.next-badge{
  position: absolute;
  left: 27.3%;
  top: 90.9%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
.next-label{
  font-family:'Benzin', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .5px;
}
.next-badge img{ width: 28px; height: auto; display:block; }
.next-btn:hover .next-badge{ filter: brightness(.85); }

/* ============================================================
   SECTION 3 — WIN MOVEMENT
============================================================ */
#winmovement{ background: var(--black); }

.wm-bg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit: cover;
  opacity: .55;
  z-index: 0;
}

.winpix-wrap{
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%,-50%);
  width: min(1400px, 86vw);
  aspect-ratio: 2100 / 665;
  z-index: 2;
}
.winpix-clip{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.winpix-clip img{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.winpix-left{ clip-path: inset(0 50% 0 0); }
.winpix-right{ clip-path: inset(0 0 0 50%); }

/* split-reveal animation */
.winpix-left img{ transform: translateX(-100%); opacity: 0; }
.winpix-right img{ transform: translateX(100%); opacity: 0; }
#winmovement.play-intro .winpix-left img{
  animation: splitFromLeft .8s var(--ease) .1s forwards;
}
#winmovement.play-intro .winpix-right img{
  animation: splitFromRight .8s var(--ease) .1s forwards;
}
@keyframes splitFromLeft{
  0%{ transform: translateX(-100%); opacity:0; }
  100%{ transform: translateX(0); opacity:1; }
}
@keyframes splitFromRight{
  0%{ transform: translateX(100%); opacity:0; }
  100%{ transform: translateX(0); opacity:1; }
}
.winpix-left img.animating{ animation: splitFromLeft .7s var(--ease) forwards; }
.winpix-right img.animating{ animation: splitFromRight .7s var(--ease) forwards; }

.wm-controls{
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 26px;
  z-index: 3;
}
.wm-arrow{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(215,74,74,.12);
  border: 1.5px solid var(--white);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(215,74,74,.55);
  transition: box-shadow .25s var(--ease), transform .2s var(--ease);
}
.wm-arrow svg{ width: 18px; height: 18px; }
.wm-arrow:hover{
  box-shadow: 0 0 26px rgba(215,74,74,.85);
  transform: scale(1.06);
}
.wm-counter{
  font-family:'Benzin', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  min-width: 74px;
  text-align: center;
}
.wm-current{ color: var(--red); font-weight: 700; }
.wm-total{ color: var(--white); font-weight: 400; opacity: .85; }

.wm-swipe-label{
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--white);
  opacity: .65;
  z-index: 3;
}

/* ============================================================
   TRANSITIONS BETWEEN SCREENS
============================================================ */
.screen.slide-out-up{ animation: slideOutUp .85s var(--ease) forwards; }
.screen.slide-in-up{ animation: slideInUp .85s var(--ease) forwards; }
.screen.slide-out-down{ animation: slideOutDown .85s var(--ease) forwards; }
.screen.slide-in-down{ animation: slideInDown .85s var(--ease) forwards; }

@keyframes slideOutUp{ to{ transform: translateY(-100%); } }
@keyframes slideInUp{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
@keyframes slideOutDown{ to{ transform: translateY(100%); } }
@keyframes slideInDown{ from{ transform: translateY(-100%); } to{ transform: translateY(0); } }

.screen.zoom-out{ animation: zoomOut .85s var(--ease) forwards; }
.screen.zoom-in{ animation: zoomIn .85s var(--ease) forwards; }
.screen.zoom-out-rev{ animation: zoomOutRev .85s var(--ease) forwards; }
.screen.zoom-in-rev{ animation: zoomInRev .85s var(--ease) forwards; }

@keyframes zoomOut{
  0%{ opacity:1; transform: scale(1); }
  100%{ opacity:0; transform: scale(1.35); }
}
@keyframes zoomIn{
  0%{ opacity:0; transform: scale(.72); }
  100%{ opacity:1; transform: scale(1); }
}
@keyframes zoomOutRev{
  0%{ opacity:1; transform: scale(1); }
  100%{ opacity:0; transform: scale(.72); }
}
@keyframes zoomInRev{
  0%{ opacity:0; transform: scale(1.35); }
  100%{ opacity:1; transform: scale(1); }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 860px){
  .nav-links{ display:none; }

  /* No white pill anywhere on mobile — $WIN is plain white text sitting
     in the same navbar row as X / CA / BUY, exactly like the reference. */
  .logo-shape-bg{ display: none; }
  .logo{
    position: fixed;
    top: 37px; left: 16px;
    transform: translateY(-50%);
    background: transparent;
    color: var(--white);
    font-size: 18px;
    padding: 0;
    z-index: 700;
  }
  .site-shell.on-page-0 .logo{ color: var(--white); }

  /* No Next button on mobile — navigation is by swipe. */
  .next-shape-bg{ display: none; }
  .next-btn{ display: none; }

  /* WIN text sits clear of the character (stacked, not overlapping)
     — !important here is a deliberate safety net: if a stale cached
     copy of an older stylesheet ever gets served (browser/host cache)
     alongside this file, these two rules still win and desktop/mobile
     never show both backgrounds at once. */
  .win-bg-text{ display: none !important; }
  .win-bg-mobile{
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease;
  }
  #home.play-intro .win-bg-mobile{
    animation: fadeInSimple 1s var(--ease) .85s forwards;
  }
  .polpi-home{
    left: 0; right: 0; transform: none;
    width: 100%; height: 68%;
    object-fit: cover; object-position: 50% 15%;
  }
  #home.play-intro .polpi-home{ animation: polpiPopMobile 1.05s var(--ease-pop) .15s forwards; }

  .concept-copy{ top: 90px; max-width: 88vw; }
  .concept-title .solid{ font-size: 38px; }
  .concept-title .ghost{ font-size: 38px; }
  .concept-copy p{ font-size: 13px; }
  .whitehouse{
    width: 160%; min-width: unset;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    opacity: .4;
  }
  /* Character removed on the Concept page for mobile — text + White House
     background only, per the reference mock. */
  .polpi-concept{ display: none; }
  .wm-controls{ bottom: 76px; }
}

/* Very narrow phones (e.g. iPhone SE / 320px): the navbar's right-side
   buttons need tighter spacing so they never overlap the $WIN logo. */
@media (max-width: 360px){
  .logo{ font-size: 16px; left: 12px; }
  .nav-right{ gap: 8px; margin-right: 10px; }
  .ca-btn{ padding: 5px 10px; gap: 6px; }
  .ca-btn span, .buy-btn span{ font-size: 12px; letter-spacing: .5px; }
  .buy-btn{ padding: 5px 16px; min-width: 0; }
  .ca-copy-icon{ width: 11px; }
  .x-link svg{ width: 17px; height: 17px; }
}

@keyframes polpiPopMobile{
  0%{ opacity: 0; transform: scale(.86); }
  70%{ opacity: 1; transform: scale(1.02); }
  100%{ opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}