:root{
  --red:#d4242a;
  --red-deep:#a8181d;
  --white:#ffffff;
  --ink:#0a0a0a;
  --ink-soft:#1a1a1a;
  --yellow:#ffce00;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{
  background:var(--red);
  color:var(--white);
  font-family:"Space Mono", ui-monospace, monospace;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{ min-height:100vh }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0 }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px }

.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ================ HERO ================ */
.hero{
  position:relative;
  min-height:100vh;
  background:var(--red);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 24px 80px;
  overflow:hidden;
}
.china-corner{
  position:absolute; top:32px; left:32px;
  display:block; width:140px; height:90px;
  z-index:2;
}
.china-corner .star{ fill:var(--yellow) }

.swoosh{
  width:min(1100px, 92vw);
  height:auto;
  display:block;
}
.swoosh-arc{
  stroke:var(--white);
  stroke-width:24;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:2200;
  stroke-dashoffset:2200;
}
.swoosh-arc.top{ animation:drawArc 1.45s cubic-bezier(.4,0,.2,1) 0.25s forwards }
.swoosh-arc.bot{ animation:drawArc 1.45s cubic-bezier(.4,0,.2,1) 0.55s forwards }
@keyframes drawArc{ to{ stroke-dashoffset:0 } }

.swoosh-text{
  font-family:"Antonio","Saira Condensed",sans-serif;
  font-weight:900;
  font-style:italic;
  font-size:230px;
  fill:var(--white);
  letter-spacing:-3px;
  opacity:0;
  transform:scale(.93);
  transform-origin:center;
  transform-box:fill-box;
  animation:textIn .8s cubic-bezier(.2,.7,.3,1.2) 1.55s forwards;
}
@keyframes textIn{ to{ opacity:1; transform:scale(1) } }

.swoosh-spark{
  fill:var(--white);
  opacity:0;
  transform:scale(.3);
  transform-box:fill-box;
  transform-origin:center;
}
.swoosh-spark.s1{ animation:sparkIn .55s ease-out 1.85s forwards }
.swoosh-spark.s2{ animation:sparkIn .55s ease-out 2.05s forwards }
.swoosh-spark.s3{ animation:sparkIn .55s ease-out 2.25s forwards }
.swoosh-spark.s4{ animation:sparkIn .55s ease-out 2.45s forwards }
.swoosh-spark.s5{ animation:sparkIn .55s ease-out 2.55s forwards }
@keyframes sparkIn{ to{ opacity:1; transform:scale(1) } }

/* ================ CA + CTA cluster ================ */
.hero-actions{
  margin-top:80px;
  width:min(720px, 92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  opacity:0;
  animation:fadeUp .8s ease-out 2.6s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } }

.ca-line{
  display:flex; align-items:center; gap:14px;
  width:100%;
  justify-content:center;
  flex-wrap:wrap;
}
.ca-label{
  font-family:"Space Mono", monospace;
  font-weight:700;
  font-size:18px;
  letter-spacing:2px;
  color:var(--white);
}
.ca-box{
  flex:1; min-width:280px; max-width:520px;
  background:var(--white);
  color:var(--ink);
  padding:14px 18px;
  font-family:"Space Mono", monospace;
  font-weight:500;
  font-size:14px;
  letter-spacing:.5px;
  border:3px solid var(--ink);
  word-break:break-all;
  text-align:center;
}
.copy-btn{
  background:var(--white);
  color:var(--ink);
  border:3px solid var(--ink);
  font-family:"Antonio", sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:2px;
  padding:14px 22px;
  text-transform:uppercase;
  transition:background .14s, color .14s;
}
.copy-btn:hover{ background:var(--ink); color:var(--white) }
.copy-btn.is-copied{ background:var(--ink); color:var(--yellow) }

.cta-row{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.cta{
  background:var(--white);
  color:var(--ink);
  border:3px solid var(--ink);
  font-family:"Antonio", sans-serif;
  font-weight:700;
  font-style:italic;
  font-size:18px;
  letter-spacing:3px;
  padding:14px 34px;
  text-transform:uppercase;
  transition:background .14s, color .14s, transform .12s;
  display:inline-flex; align-items:center; gap:8px;
}
.cta:hover:not(.disabled){ background:var(--ink); color:var(--white); transform:translateY(-2px) }
.cta:active:not(.disabled){ transform:translateY(1px) }
.cta.disabled{ opacity:.5; cursor:not-allowed }

/* ================ DIVIDER ================ */
.divider{
  height:8px;
  background:var(--ink);
}

/* ================ SECTION (split) ================ */
.section{
  background:var(--red);
  padding:90px 32px 110px;
  position:relative;
}
.section-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:60px;
  align-items:center;
}
.section.flip .section-inner{ grid-template-columns:6fr 5fr }
.section.flip .lore-side{ order:2 }
.section.flip .visual-side{ order:1 }

.china-stars{
  position:absolute;
  top:36px; left:36px;
  display:flex; flex-direction:column; gap:6px;
  z-index:1;
  font-family:"Antonio",sans-serif;
  font-size:34px;
  line-height:.9;
  color:var(--yellow);
  pointer-events:none;
}
.china-stars .big{ font-size:60px }
.china-stars .small-cluster{ display:flex; gap:4px; transform:rotate(-8deg) margin-left:36px }
.china-stars .row{ display:flex; gap:6px; padding-left:46px }

.lore-side{ position:relative; z-index:2 }
.lore-card{
  background:var(--white);
  color:var(--ink);
  border:3px solid var(--ink);
  padding:34px 32px 36px;
  box-shadow:8px 8px 0 0 var(--ink);
  max-width:520px;
}
.lore-card h2{
  font-family:"Antonio", sans-serif;
  font-weight:900;
  font-size:42px;
  line-height:.95;
  letter-spacing:-.5px;
  color:var(--ink);
  margin-bottom:18px;
  text-transform:uppercase;
}
.lore-card p{
  font-family:"Space Mono", monospace;
  font-size:14px;
  line-height:1.65;
  color:var(--ink);
}
.lore-card p + p{ margin-top:14px }
.lore-card .accent{ font-weight:700; color:var(--red) }

.visual-side{
  position:relative;
  z-index:2;
}
.visual-frame{
  width:100%;
  aspect-ratio:1/1;
  background:var(--red-deep);
  overflow:hidden;
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 0 var(--ink);
}
.visual-frame.tall{ aspect-ratio:4/5 }
.visual-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ================ STRIP ================ */
.strip{
  background:var(--red);
  padding:0 32px 80px;
}
.strip-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
}
.strip-tile{
  position:relative;
  aspect-ratio:1/1;
  border:3px solid var(--ink);
  overflow:hidden;
  background:var(--ink);
}
.strip-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:grayscale(.0) }
.strip-tile:hover img{ transform:scale(1.06) }
.strip-tile .label{
  position:absolute; bottom:0; left:0; right:0;
  background:var(--ink); color:var(--white);
  font-family:"Antonio", sans-serif;
  font-weight:700;
  font-style:italic;
  font-size:14px;
  letter-spacing:3px;
  padding:8px 12px;
  text-transform:uppercase;
}

/* ================ FOOTER ================ */
footer{
  background:var(--ink);
  color:var(--white);
  padding:24px 36px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.foot-brand{
  font-family:"Antonio", sans-serif;
  font-weight:900;
  font-style:italic;
  font-size:28px;
  letter-spacing:2px;
  color:var(--white);
}
.foot-row{ display:flex; gap:10px; flex-wrap:wrap }
.foot-row .cta{
  background:transparent;
  color:var(--white);
  border-color:var(--white);
  padding:10px 22px;
  font-size:14px;
  letter-spacing:2px;
}
.foot-row .cta:hover:not(.disabled){ background:var(--white); color:var(--ink) }
.foot-row .cta.disabled{ opacity:.5 }

.copy-line{
  background:var(--ink-soft);
  color:#6a6a6a;
  text-align:center;
  font-family:"Space Mono", monospace;
  font-size:12px;
  letter-spacing:3px;
  padding:14px;
}

/* ================ TOAST ================ */
.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(40px);
  background:var(--white); color:var(--ink);
  border:3px solid var(--ink);
  padding:12px 22px;
  font-family:"Antonio", sans-serif;
  font-weight:700;
  font-style:italic;
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  box-shadow:6px 6px 0 0 var(--ink);
  opacity:0;
  transition:transform .25s, opacity .25s;
  z-index:200;
  pointer-events:none;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ================ MOBILE ================ */
@media (max-width:880px){
  .hero{ padding:50px 18px 60px; min-height:auto }
  .china-corner{ top:18px; left:18px; width:100px; height:64px }
  .swoosh-text{ font-size:180px }
  .hero-actions{ margin-top:50px; gap:18px }
  .ca-label{ font-size:14px }
  .ca-box{ font-size:11px; padding:12px 14px; flex-basis:100% }
  .copy-btn{ padding:12px 20px; font-size:14px }
  .cta{ padding:12px 24px; font-size:14px; letter-spacing:2px }

  .section{ padding:60px 22px 70px }
  .section-inner{ grid-template-columns:1fr; gap:34px }
  .section.flip .lore-side{ order:1 }
  .section.flip .visual-side{ order:2 }
  .lore-card{ padding:24px 22px 28px; box-shadow:5px 5px 0 0 var(--ink) }
  .lore-card h2{ font-size:32px }
  .visual-frame{ box-shadow:5px 5px 0 0 var(--ink) }
  .china-stars{ top:18px; left:18px; font-size:24px }
  .china-stars .big{ font-size:38px }

  .strip-inner{ grid-template-columns:1fr 1fr; gap:12px }
  .strip-tile .label{ font-size:11px; letter-spacing:2px }

  footer{ padding:18px 22px; flex-direction:column; align-items:flex-start; gap:14px }
  .foot-brand{ font-size:22px }
  .foot-row .cta{ font-size:12px; padding:8px 16px }
}

@media (prefers-reduced-motion: reduce){
  .swoosh-arc, .swoosh-text, .swoosh-spark, .hero-actions{
    animation:none !important;
    stroke-dashoffset:0 !important;
    opacity:1 !important;
    transform:none !important;
  }
  .strip-tile:hover img{ transform:none }
}