:root {
  --red: #DA291C;
  --gold: #FFC72C;
  --navy: #0d2240;
  --cream: #fbf3e2;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--cream); color: var(--navy); }

.hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; text-align: center; color: #fff; }
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,34,64,.15) 0%, rgba(13,34,64,.25) 55%, rgba(13,34,64,.85) 100%),
              url('/static/hero.png') center 30% / cover no-repeat;
  animation: bob 9s ease-in-out infinite;
}
@keyframes bob { 50% { transform: scale(1.04) translateY(-8px); } }
.hero-content { position: relative; align-self: end; padding: 0 1rem 14vh; }
.kicker { font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; color: var(--gold); text-shadow: 0 2px 6px #000; }
h1 {
  font-family: 'Pirata One', serif; font-size: clamp(4rem, 13vw, 10rem); margin: 0; line-height: .9;
  color: var(--gold); -webkit-text-stroke: 3px var(--red); paint-order: stroke fill;
  text-shadow: 0 6px 0 #7a1009, 0 12px 30px rgba(0,0,0,.6);
}
.tagline { font-family: Bangers, sans-serif; font-size: clamp(1.6rem, 4vw, 2.8rem); letter-spacing: .06em; margin: .4rem 0 0; text-shadow: 0 3px 8px #000; }
.tagline span { color: var(--gold); }
.wave {
  position: absolute; bottom: -1px; left: 0; right: 0; height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0Z' fill='%23DA291C'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--red); color: #fff; text-align: center; padding: 1.5rem 1rem 2rem; }
.stats strong { display: block; font-family: "Luckiest Guy", sans-serif; font-size: 2.6rem; color: var(--gold); letter-spacing: .04em; }
.stats span { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }

.route { max-width: 1200px; margin: 0 auto; padding: 4rem 1.25rem; }
h2 { font-family: 'Pirata One', serif; font-size: 3.5rem; text-align: center; margin: 0; color: var(--red); }
.dest { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
.treasure-map { position: relative; background: #f3e2bd; border-radius: 18px; border: 4px solid var(--navy); box-shadow: 8px 8px 0 var(--gold); overflow: hidden; }
/* The photo card sets the row height; the map scales to fit inside it. */
.treasure-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sea { animation: drift 6s linear infinite; }
@keyframes drift { to { transform: translateX(60px); } }
.state { fill: #e9cf94; stroke: #7a4a1a; stroke-width: 4; stroke-linejoin: round; }
.label { font-family: 'Pirata One', serif; font-size: 40px; fill: #7a4a1a; opacity: .7; letter-spacing: .1em; }
.label.small { font-size: 26px; fill: #3d6f8a; }
.pin-label { font-size: 30px; fill: var(--red); opacity: 1; }
.x { stroke: var(--red); stroke-width: 9; stroke-linecap: round; fill: none; }
.compass { font-family: 'Pirata One', serif; }

.faq { max-width: 800px; margin: 0 auto; padding: 0 1.25rem 4rem; }
.faq h2 { margin-bottom: 1.5rem; }
.faq details { background: #fff; border: 3px solid var(--navy); border-radius: 12px; margin-bottom: 1rem; box-shadow: 4px 4px 0 var(--gold); }
.faq summary { cursor: pointer; padding: 1rem 1.2rem; font-family: Bangers, sans-serif; font-size: 1.4rem; letter-spacing: .03em; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.fries { flex: none; width: 34px; height: 34px; }
.fries rect { fill: var(--gold); stroke: #c08a00; stroke-width: .6; }
.fry-set > g { transition: transform .25s ease-in; }
.carton { fill: var(--red); stroke: #7a1009; stroke-width: 1; stroke-linejoin: round; }
.arch { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
/* Eat the fries one by one, sinking them into the carton. */
.faq details[open] .fry-set > g { transform: translateY(12px); }
.faq details[open] .fry-set > g:nth-child(2) { transition-delay: .1s; }
.faq details[open] .fry-set > g:nth-child(3) { transition-delay: .2s; }
.faq details[open] .fry-set > g:nth-child(4) { transition-delay: .3s; }
.faq details[open] .fry-set > g:nth-child(5) { transition-delay: .4s; }
.faq details p { margin: 0; padding: 0 1.2rem 1.1rem; line-height: 1.5; }
.faq details a { color: var(--red); font-weight: 600; }

/* Textbook-style diagram: burger enters the artery, plaque builds, blood cells jam. Plays on open. */
.artery-fig { margin: 0 1.2rem 1.2rem; padding: .8rem; background: #fffdf6; border: 2px solid #c9bfa6; border-radius: 8px; }
.artery-fig svg { display: block; width: 100%; }
.artery-fig figcaption { text-align: center; font-family: Georgia, serif; font-style: italic; font-size: .9rem; color: #555; margin-top: .3rem; }
.vessel { fill: #f2a7a0; stroke: #9b3b33; stroke-width: 3; }
.lumen { fill: #b8231c; }
.plaque { fill: #f4d35e; stroke: #b8902a; stroke-width: 2; transform-box: fill-box; transform: scaleY(0); }
.plaque.top { transform-origin: top; }
.plaque.bottom { transform-origin: bottom; }
.cell { fill: #e8463c; stroke: #7a1009; stroke-width: 1.5; opacity: 0; }
.burger { transform: translate(55px, 100px); }
.lbl { font-family: Georgia, serif; font-size: 15px; letter-spacing: .1em; fill: #333; }
.lbl.flow { font-style: italic; letter-spacing: 0; }
.lead { stroke: #333; stroke-width: 1.5; }
details[open] .burger { animation: gulp 7s ease-in infinite; }
details[open] .plaque { animation: clog 7s ease-out infinite; }
details[open] .cell { animation: flow 7s ease-out infinite; }
@keyframes gulp {
  12% { transform: translate(150px, 100px) scale(.7); opacity: 1; }
  20%, 100% { transform: translate(200px, 100px) scale(.2); opacity: 0; }
}
@keyframes clog { 0%, 15% { transform: scaleY(0); } 45%, 85% { transform: scaleY(1); } 95%, 100% { transform: scaleY(0); } }
@keyframes flow {
  0%, 10% { opacity: 0; translate: -10px 0; }
  15% { opacity: 1; }
  50%, 85% { opacity: 1; translate: var(--stop) 0; }
  92%, 100% { opacity: 0; translate: var(--stop) 0; }
}
.card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; border: 4px solid var(--navy); box-shadow: 8px 8px 0 var(--gold); }
.photo {
  position: relative; aspect-ratio: 3 / 2;
  background: radial-gradient(circle at 30% 120%, var(--gold) 0 18%, transparent 19%), linear-gradient(135deg, var(--red), #8f150c);
}
.photo::after {
  content: 'M'; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: Bangers, sans-serif; font-size: 6rem; color: var(--gold); opacity: .9;
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }
.info { padding: 1rem 1.2rem 1.2rem; }
.island { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--red); font-weight: 800; }
.info h3 { font-family: Bangers, sans-serif; font-size: 1.8rem; letter-spacing: .03em; margin: .2rem 0 .3rem; }
.info p { margin: 0 0 .7rem; line-height: 1.45; }
.addr { font-size: .85rem; color: var(--navy); font-weight: 600; }
body.locked { overflow: hidden; }

.gate { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: radial-gradient(circle at var(--cx) 50%, rgba(13,34,64,.5), rgba(13,34,64,.95) 70%), url('/static/hero.png') var(--bx) center / 200vw auto no-repeat, var(--navy);
  transition: transform 1.4s cubic-bezier(.7,0,.2,1) .35s;
}
.door.left { left: 0; --cx: 100%; --bx: left; border-right: 3px solid var(--gold); }
.door.right { right: 0; --cx: 0%; --bx: right; border-left: 3px solid var(--gold); }
.gate.open .door.left { transform: translateX(-102%) skewY(-4deg); }
.gate.open .door.right { transform: translateX(102%) skewY(4deg); }
.flash { position: absolute; inset: 0; background: radial-gradient(circle, #fff 0%, var(--gold) 30%, transparent 70%); opacity: 0; pointer-events: none; }
.gate.open .flash { animation: flash 1.1s ease-out; }
@keyframes flash { 25% { opacity: 1; } to { opacity: 0; transform: scale(2.5); } }
.gate-inner { position: relative; display: flex; flex-direction: column; align-items: center; background: none; border: 0; cursor: pointer; color: inherit; transition: transform .9s cubic-bezier(.6,0,.4,1), opacity .9s, filter .9s; }
.gate.open .gate-inner { transform: scale(3); opacity: 0; filter: blur(8px); }
.gate-cta {
  padding: .7rem 2.4rem; border: 3px solid var(--gold); border-radius: 999px; background: var(--red);
  font-family: Bangers, sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; letter-spacing: .12em;
  box-shadow: 0 6px 0 #7a1009, 0 0 0 0 rgba(255,199,44,.7); animation: beckon 1.8s ease-out infinite;
}
@keyframes beckon { 70%, 100% { box-shadow: 0 6px 0 #7a1009, 0 0 0 22px rgba(255,199,44,0); } }
.fine { text-align: center; font-size: .8rem; opacity: .6; margin-top: 2rem; }

footer { background: var(--navy); color: var(--gold); text-align: center; padding: 2rem 1rem; font-family: Bangers, sans-serif; font-size: 1.3rem; letter-spacing: .05em; }

@media (max-width: 860px) {
  .dest { grid-template-columns: 1fr; }
  .treasure-map { aspect-ratio: 700 / 760; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}