/* ===== Pilot's Coffee — landing experience ===== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Special+Elite&display=swap');

:root{
  --paper:#e8ddc4;
  --paper-warm:#e2d4b6;
  --paper-deep:#d3c19c;
  --ink:#241f18;
  --ink-soft:#3c342a;
  --ink-mute:#6b6052;
  --rust:#b0562e;
  --rust-deep:#974324;
  --cream:#efe7d4;
  --display:'Anton', 'Arial Narrow', sans-serif;
  --cond:'Oswald', sans-serif;
  --type:'Special Elite', 'Courier New', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:#0d0b09;
  color:var(--ink);
  font-family:var(--cond);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

#stage{
  position:fixed; inset:0;
  background:#0d0b09;
  overflow:hidden;
}

/* ---------- INTRO VIDEO LAYER ---------- */
#intro{
  position:absolute; inset:0; z-index:40;
  background:#0d0b09;
  transition:opacity 1.25s ease;
}
#intro.gone{ opacity:0; pointer-events:none; }
#introVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* gentle film vignette over video */
#intro::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(20,12,4,.45) 100%);
}
#skip{
  position:absolute; right:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,38px);
  z-index:3;
  font-family:var(--type); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,236,220,.82); background:rgba(20,15,9,.32);
  border:1px solid rgba(244,236,220,.4); border-radius:2px;
  padding:9px 16px; cursor:pointer; backdrop-filter:blur(2px);
  transition:background .2s, color .2s, opacity .6s;
}
#skip:hover{ background:rgba(176,86,46,.85); color:var(--cream); border-color:transparent; }

/* ---------- HERO STAGE (concepts live here) ---------- */
#hero{ position:absolute; inset:0; z-index:10; }
.concept{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .5s ease;
  overflow:hidden;
}
.concept.active{ opacity:1; visibility:visible; }

/* shared textures ------------------------------------------------ */
.paper-bg{ position:absolute; inset:0; background:var(--paper); }
.paper-bg::before{ /* coffee stains + tonal unevenness */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 88% 86%, rgba(120,80,40,.16), transparent 60%),
    radial-gradient(28% 22% at 84% 80%, rgba(90,55,25,.20), transparent 70%),
    radial-gradient(40% 40% at 8% 12%, rgba(120,90,50,.10), transparent 60%),
    radial-gradient(90% 70% at 50% 0%, rgba(255,250,238,.5), transparent 55%);
  mix-blend-mode:multiply;
}
.grain{ position:absolute; inset:0; pointer-events:none; z-index:30; }
.grain::after{
  content:''; position:absolute; inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.06; mix-blend-mode:multiply;
}
/* faint engineering grid */
.grid-tr,.grid-bl{
  position:absolute; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(60,50,38,.28) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(60,50,38,.28) 0 1px, transparent 1px 34px);
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my), #000, transparent 72%);
          mask-image:radial-gradient(circle at var(--mx) var(--my), #000, transparent 72%);
}
.grid-tr{ top:-40px; right:-40px; width:46vw; height:42vh; --mx:80%; --my:25%; }
.grid-bl{ bottom:-40px; left:-40px; width:42vw; height:46vh; --mx:18%; --my:78%; }

/* mountains plate */
.mtns{ position:absolute; inset:0; background:url('assets/mountains.jpg') center 28%/cover no-repeat; }
.mtns.bw{ filter:grayscale(1) contrast(1.18) brightness(1.04); }

/* ---------- type primitives ---------- */
.headline{
  font-family:var(--display);
  text-transform:uppercase; color:var(--ink);
  line-height:.92; letter-spacing:.005em;
}
.distress{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 1 1 0 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  -webkit-mask-size:300px 300px; mask-size:300px 300px;
}
.kicker{
  font-family:var(--type); letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(10px,1vw,13px); color:var(--ink-mute);
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; cursor:pointer; border:none; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; transition:transform .15s ease, background .2s, color .2s, box-shadow .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-fill{
  background:var(--rust); color:var(--cream);
  padding:clamp(13px,1.5vh,18px) clamp(28px,3vw,44px);
  font-size:clamp(15px,1.5vw,19px);
  box-shadow:3px 3px 0 rgba(36,31,24,.32);
}
.btn-fill:hover{ background:var(--rust-deep); transform:translateY(-2px); box-shadow:4px 6px 0 rgba(36,31,24,.34); }
.btn-ghost{
  background:transparent; color:var(--ink);
  border:2.5px solid var(--ink);
  padding:clamp(11px,1.5vh,16px) clamp(26px,3vw,40px);
  font-size:clamp(15px,1.5vw,19px);
}
.btn-ghost:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px); }

/* ============================================================
   CONCEPT 1 — FIELD MANUAL (faithful recreation)
   ============================================================ */
#c1 .paper-bg{ background:#dac79e; }          /* warmer kraft ground */
#c1 .mtns{
  height:84%; inset:0 0 auto 0;
  filter:sepia(.32) saturate(.72) contrast(1.12) brightness(.9);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.5) 84%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.5) 84%,transparent 100%);
  mix-blend-mode:multiply; opacity:.96;
}
/* darker-sepia transition + warm lower ground so the headline sits in the scene */
#c1 .c1-grade{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg,
    rgba(60,38,16,0) 34%,
    rgba(74,46,20,.22) 62%,
    rgba(58,36,16,.34) 82%,
    rgba(48,30,14,.40) 100%);
  mix-blend-mode:multiply;
}
#c1 .wrap{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:4vh 5vw;
  gap:clamp(14px,2.4vh,30px);
}
#c1 .logo{ width:clamp(220px,26vw,400px); filter:drop-shadow(0 1px 0 rgba(255,250,240,.4)); }
#c1 .stampbox{
  position:relative; width:max-content; max-width:94vw; overflow:visible;
  padding:clamp(8px,1.4vh,18px) clamp(22px,3vw,48px);
  border:3px solid var(--ink); border-radius:4px; transform:rotate(-.5deg);
}
#c1 .stampbox::before{ /* break the box edges a touch */
  content:''; position:absolute; inset:-3px; border:3px solid #d3bd90;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06 0.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 -6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  pointer-events:none;
}
#c1 .fya{ font-size:clamp(24px,6.4vw,108px); white-space:nowrap; }
#c1 .ctas{ display:flex; gap:clamp(14px,1.6vw,22px); flex-wrap:wrap; justify-content:center; margin-top:clamp(6px,1vh,14px); }

/* ============================================================
   CONCEPT 2 — CINEMATIC (photographic, lower-third)
   ============================================================ */
#c2 .mtns{ background-position:center 35%; transform:scale(1.04); }
#c2 .photo-grade{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,12,5,.32) 0%, transparent 22%, transparent 50%, rgba(16,10,4,.66) 100%),
    radial-gradient(120% 80% at 50% 38%, transparent 50%, rgba(20,12,4,.45) 100%);
}
#c2 .nav{
  position:absolute; top:0; left:0; right:0; z-index:25;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vh,30px) clamp(20px,4vw,60px);
}
#c2 .nav .mark{ height:clamp(48px,6.6vh,86px); filter:drop-shadow(0 2px 7px rgba(20,12,4,.55)); }
#c2 .nav .links{ display:flex; gap:clamp(18px,2.4vw,40px); align-items:center; }
#c2 .nav a{
  font-family:var(--cond); font-weight:500; text-transform:uppercase;
  letter-spacing:.18em; font-size:clamp(11px,1vw,14px);
  color:rgba(239,231,212,.86); text-decoration:none; transition:color .2s;
}
#c2 .nav a:hover{ color:var(--rust); }
#c2 .nav a.cart{ border:1.5px solid rgba(239,231,212,.5); border-radius:2px; padding:6px 12px; }
#c2 .wrap{
  position:absolute; left:0; right:0; bottom:clamp(40px,9vh,110px); z-index:20;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(14px,2vh,26px); padding:0 6vw;
}
#c2 .logo{ width:clamp(180px,20vw,300px); }
#c2 .fya{ color:var(--cream); font-size:clamp(30px,5.6vw,96px); white-space:nowrap;
  text-shadow:0 2px 26px rgba(0,0,0,.55); }
#c2 .scrollcue{
  position:absolute; left:50%; bottom:clamp(16px,2.4vh,28px); transform:translateX(-50%);
  z-index:22; color:rgba(239,231,212,.7); font-family:var(--type);
  letter-spacing:.3em; font-size:11px; text-transform:uppercase; text-align:center;
}
#c2 .scrollcue .chev{ display:block; margin:6px auto 0; width:13px; height:13px;
  border-right:2px solid rgba(239,231,212,.7); border-bottom:2px solid rgba(239,231,212,.7);
  transform:rotate(45deg); animation:bob 1.8s ease-in-out infinite; }

/* ============================================================
   CONCEPT 3 — BOARDING PASS / FLIGHT PLAN
   ============================================================ */
#c3 .desk{ position:absolute; inset:0; background:var(--paper-deep); }
#c3 .desk .mtns{ opacity:.16; filter:grayscale(1) contrast(1.1); }
#c3 .wrap{ position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:5vh 5vw; }
#c3 .ticket{
  position:relative; display:grid; grid-template-columns:minmax(180px,1fr) 2.1fr;
  width:min(960px,94vw); background:var(--cream); color:var(--ink);
  box-shadow:0 30px 60px -24px rgba(20,12,4,.6), 0 2px 0 rgba(255,255,255,.5) inset;
  transform:rotate(-1.1deg); border:1px solid rgba(60,50,38,.25);
}
#c3 .stub{ position:relative; padding:clamp(20px,3vw,38px); border-right:2px dashed rgba(60,50,38,.45);
  display:flex; flex-direction:column; gap:14px; }
#c3 .stub::after{ /* perforation dots */
  content:''; position:absolute; top:0; bottom:0; right:-1px; width:2px; }
#c3 .perf-t,#c3 .perf-b{ position:absolute; width:22px; height:22px; border-radius:50%;
  background:var(--paper-deep); right:-11px; }
#c3 .perf-t{ top:-11px; } #c3 .perf-b{ bottom:-11px; }
#c3 .logo{ width:clamp(120px,12vw,168px); }
#c3 .meta{ font-family:var(--type); font-size:clamp(10px,.95vw,12.5px); line-height:1.7; color:var(--ink-soft); }
#c3 .meta b{ display:block; color:var(--ink); letter-spacing:.06em; }
#c3 .main{ padding:clamp(22px,3.4vw,46px); display:flex; flex-direction:column; justify-content:center; gap:clamp(12px,2vh,22px); }
#c3 .route{ display:flex; align-items:center; gap:14px; font-family:var(--type); letter-spacing:.12em;
  font-size:clamp(12px,1.3vw,17px); color:var(--ink-soft); }
#c3 .route .line{ flex:1; height:2px; background:repeating-linear-gradient(90deg,var(--ink-soft) 0 8px,transparent 8px 14px); position:relative; }
#c3 .route .plane{ font-size:18px; }
#c3 .fya{ font-size:clamp(34px,5.2vw,80px); }
#c3 .barcode{ height:42px; width:100%;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 12px, var(--ink) 12px 14px, transparent 14px 19px);
  opacity:.85; margin-top:4px; }
#c3 .ctas{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* ============================================================
   CONCEPT 4 — QUIET SCROLL (no buttons)
   ============================================================ */
#c4 .mtns{ opacity:.22; filter:grayscale(1) contrast(1.05) brightness(1.05);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 42%,#000 30%,transparent 86%);
          mask-image:radial-gradient(120% 90% at 50% 42%,#000 30%,transparent 86%); }
#c4 .wrap{ position:absolute; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:clamp(18px,3vh,40px); padding:6vh 6vw; }
#c4 .logo{ width:clamp(240px,28vw,440px); }
#c4 .tag{ font-family:var(--type); letter-spacing:.42em; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(11px,1.5vw,20px); color:var(--ink-soft);
  border-top:1.5px solid rgba(60,50,38,.4); border-bottom:1.5px solid rgba(60,50,38,.4);
  padding:clamp(10px,1.6vh,16px) clamp(18px,2vw,30px); }
#c4 .scrollcue{ position:absolute; left:50%; bottom:clamp(24px,4vh,46px); transform:translateX(-50%);
  z-index:22; color:var(--ink-mute); font-family:var(--type); letter-spacing:.3em;
  font-size:11px; text-transform:uppercase; text-align:center; }
#c4 .scrollcue .chev{ display:block; margin:8px auto 0; width:13px; height:13px;
  border-right:2px solid var(--ink-mute); border-bottom:2px solid var(--ink-mute);
  transform:rotate(45deg); animation:bob 1.8s ease-in-out infinite; }

/* ============================================================
   CONCEPT 5 — EDITORIAL SPLIT
   ============================================================ */
#c5{ display:block; }
#c5 .split{ position:absolute; inset:0; display:grid; grid-template-columns:1.05fr 1fr; }
#c5 .left{ position:relative; background:var(--paper); display:flex; flex-direction:column;
  justify-content:center; padding:clamp(30px,5vw,80px); gap:clamp(16px,2.4vh,30px); z-index:2; }
#c5 .left .mark{ width:clamp(150px,15vw,220px); }
#c5 .fya{ font-size:clamp(44px,6vw,118px); }
#c5 .fya span{ display:block; }
#c5 .fya .you{ color:var(--rust); -webkit-text-stroke:0; }
#c5 .blurb{ font-family:var(--type); font-size:clamp(13px,1.1vw,16px); line-height:1.8;
  color:var(--ink-soft); max-width:38ch; }
#c5 .ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; }
#c5 .right{ position:relative; overflow:hidden; background:#1a140d; }
#c5 .right .mtns{ filter:grayscale(1) contrast(1.16) brightness(.98); }
#c5 .right::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(232,221,196,.5) 0, transparent 14%); }
#c5 .vlabel{ position:absolute; right:clamp(14px,2vw,30px); top:50%;
  transform:translateY(-50%) rotate(90deg); transform-origin:center;
  font-family:var(--type); letter-spacing:.4em; text-transform:uppercase;
  font-size:clamp(10px,.9vw,13px); color:rgba(239,231,212,.82); white-space:nowrap; z-index:3; }

/* ============================================================
   CONCEPT SWITCHER
   ============================================================ */
#switcher{
  position:absolute; left:50%; bottom:clamp(14px,2.4vh,26px); transform:translateX(-50%);
  z-index:60; display:flex; align-items:center; gap:4px;
  background:rgba(28,22,15,.92); border:1px solid rgba(239,231,212,.18);
  border-radius:40px; padding:7px 8px 7px 16px;
  box-shadow:0 14px 36px -12px rgba(0,0,0,.7); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .6s ease .2s; pointer-events:none;
  max-width:94vw;
}
#switcher.show{ opacity:1; pointer-events:auto; }
#switcher .lab{ font-family:var(--type); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(239,231,212,.5); margin-right:6px; white-space:nowrap; }
#switcher .tabs{ display:flex; gap:3px; }
#switcher .tab{
  font-family:var(--cond); font-weight:600; font-size:12.5px; letter-spacing:.06em;
  color:rgba(239,231,212,.62); background:transparent; border:none; cursor:pointer;
  padding:7px 11px; border-radius:30px; transition:all .18s; white-space:nowrap;
}
#switcher .tab:hover{ color:var(--cream); background:rgba(239,231,212,.1); }
#switcher .tab.on{ color:var(--cream); background:var(--rust); }
#switcher .sep{ width:1px; height:22px; background:rgba(239,231,212,.18); margin:0 6px; }
#switcher .replay{
  display:flex; align-items:center; gap:7px; cursor:pointer; border:none; background:transparent;
  font-family:var(--type); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(239,231,212,.7); padding:7px 12px 7px 8px; border-radius:30px; transition:color .2s,background .2s;
}
#switcher .replay:hover{ color:var(--cream); background:rgba(239,231,212,.1); }
#switcher .replay svg{ width:14px; height:14px; }

/* concept name caption above switcher */
#cname{
  position:absolute; left:50%; bottom:calc(clamp(14px,2.4vh,26px) + 52px);
  transform:translateX(-50%); z-index:60;
  font-family:var(--type); letter-spacing:.26em; text-transform:uppercase;
  font-size:11px; color:var(--ink-mute);
  opacity:0; transition:opacity .4s; pointer-events:none; white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,250,240,.4);
}
#cname.show{ opacity:.85; }
#cname.on-dark{ color:rgba(239,231,212,.8); text-shadow:0 1px 6px rgba(0,0,0,.5); }

@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0,0);} 50%{ transform:rotate(45deg) translate(3px,3px);} }

/* entrance — resting state is visible; animate from hidden (backwards) so
   captures / reduced-motion / no-JS always show content */
.anim{ opacity:1; }
.concept.active .anim{ animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards; }
.concept.active .anim.d1{ animation-delay:.08s; }
.concept.active .anim.d2{ animation-delay:.18s; }
.concept.active .anim.d3{ animation-delay:.3s; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){
  .concept.active .anim{ animation:none; }
  #c2 .scrollcue .chev,#c4 .scrollcue .chev{ animation:none; }
}

/* responsive: stack editorial + shrink ticket */
@media (max-width:760px){
  #c5 .split{ grid-template-columns:1fr; grid-template-rows:1fr 38%; }
  #c5 .right{ order:2; }
  #c3 .ticket{ grid-template-columns:1fr; }
  #c3 .stub{ border-right:none; border-bottom:2px dashed rgba(60,50,38,.45); }
  #switcher .lab{ display:none; }
}