/* ============ Tokens ============ */
:root{
  --cream:#F4EFDF;
  --cream-deep:#EEE7D2;
  --ink:#24201A;
  --ink-soft:#5B564C;
  --orange:#E68A52;
  --orange-deep:#D97740;
  --orange-text:#B04E1A; /* same hue, dark enough for small text (4.6:1 on cream) */
  --tint:#DC712E;
  --journal-ivory:#F7F1E3;
  --journal-ink:#33302A;
  --journal-blue:#5C7A99;
  --journal-orange:#C97A4A;
  --journal-cover:#B5745A;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --hand:'Caveat', cursive;
}

*{box-sizing:border-box;}
html{}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ============ Nav ============ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:400;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 48px;
  background:rgba(244,239,223,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(36,32,26,0.06);
  transition:opacity .2s ease;
}
.nav-name{
  font-family:var(--serif);
  font-weight:600;
  font-size:15px;
  letter-spacing:0.06em;
}
.nav-links{display:flex; gap:36px;}
.nav-links button, .nav-links a{
  background:none; border:none; padding:0;
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:0.14em;
  color:var(--ink);
  position:relative;
  padding-bottom:3px;
}
.nav-links button::after, .nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--orange-deep);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.nav-links button:hover::after, .nav-links a:hover::after{transform:scaleX(1);}

/* ============ Hero ============ */
.hero{
  min-height:100vh;
  display:flex; align-items:center;
  padding:0 48px;
  position:relative;
  overflow:hidden; /* the cat walks in from off-screen; keep it inside the hero */
}
.hero-inner{max-width:600px; padding-top:40px; position:relative; z-index:2;}
.eyebrow{
  font-size:12.5px; letter-spacing:0.16em; color:var(--orange-text);
  font-weight:600; margin:0 0 18px;
}
.headline{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(40px, 6vw, 68px);
  line-height:1.08;
  margin:0 0 26px;
  letter-spacing:-0.01em;
}
.sub{
  font-size:13px; letter-spacing:0.12em; color:var(--orange-text);
  font-weight:600;
  margin:0 0 34px;
}
.cta{
  display:inline-block;
  background:var(--orange);
  color:var(--ink); /* dark label on the bright orange: 6.3:1 (white was 2.6:1) */
  font-weight:700;
  font-size:15px;
  padding:16px 30px;
  border-radius:999px;
  border:none;
  box-shadow:0 4px 14px rgba(214,120,60,0.22);
  transition:transform .4s cubic-bezier(.22,.85,.35,1), box-shadow .4s cubic-bezier(.22,.85,.35,1), background .3s ease;
}
.cta:hover{transform:translateY(-2px); background:var(--orange-deep); box-shadow:0 8px 20px rgba(214,120,60,0.30);}

.pool-stage{
  position:absolute;
  right:-6vw; bottom:100px;
  width:min(37vw, 560px);
  pointer-events:none;
  z-index:1;
}
.cat-wrap{
  position:absolute; /* relative to the hero, so it scrolls with the page */
  left:0; top:0;
  transform-origin:70% 100%;
  will-change:transform;
  z-index:5;
  height:72px;
}
#homeCat img{image-rendering:pixelated; display:block; width:100%; height:100%; object-fit:contain;}
.cat-shadow{
  position:absolute;
  bottom:-6%;
  left:14%;
  width:70%;
  height:10%;
  background:radial-gradient(ellipse at center, rgba(30,25,15,0.25) 0%, rgba(30,25,15,0) 72%);
}

@keyframes tailFlick{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(-4deg);}
}
.do-tail{animation:tailFlick 0.5s ease;}


/* ============ Section shell ============ */
.section{padding:120px 48px; max-width:1180px; margin:0 auto;}
.section-label{
  font-size:12px; letter-spacing:0.16em; color:var(--orange-text); font-weight:700; margin:0 0 20px;
}

/* ============ Work ============ */
#work{
  width:100%;
  background:var(--cream);
  padding:120px 48px;
}
.work-inner{max-width:1880px; margin:0 auto; position:relative; z-index:1;}
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.case-card{
  display:block; border:none; padding:0; text-align:left; width:100%;
  background:none;
  transition:transform .35s ease;
  position:relative;
}
.case-card:hover{transform:translateY(-6px);}
.poster-frame{
  background:#D9C9B0;
  padding:14px 14px 18px;
  border-radius:4px;
  box-shadow:0 14px 30px rgba(60,40,15,0.18);
  overflow:hidden;
  position:relative;
}
.case-card .poster{
  aspect-ratio:1692/2048;
  background-size:cover; background-position:center;
  border-radius:2px;
  transition:transform .5s ease;
  overflow:hidden;
}
.case-card:hover .poster{transform:scale(1.04);}
.card-overlay{
  position:absolute; inset:0;
  border-radius:4px;
  background:linear-gradient(180deg, rgba(24,20,14,0.18) 0%, rgba(24,20,14,0.88) 74%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px 24px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.case-card:hover .card-overlay{opacity:1; transform:translateY(0);}
.card-overlay .title{font-family:var(--serif); font-size:26px; margin:0 0 10px; font-weight:600; color:#fff;}
.card-overlay .hook{font-size:15px; color:#fff; opacity:0.85; line-height:1.55; margin:0 0 20px;}
.card-overlay .view-project{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; letter-spacing:.08em; font-weight:700; color:#fff;
  width:fit-content;
  border-bottom:1px solid rgba(255,255,255,0.5);
  padding-bottom:4px;
}
.card-overlay .arrow{display:inline-block; transition:transform .3s ease;}
.case-card:hover .card-overlay .arrow{transform:translateX(4px);}

@media (max-width:900px){ .case-grid{grid-template-columns:1fr;} }

/* ============ About (drawer) ============ */
.about-drawer{
  position:fixed; inset:0; z-index:300;
  background:var(--cream);
  transform:translateY(100%);
  transition:transform .6s cubic-bezier(.25,.9,.3,1);
  overflow-y:auto;
}
.about-drawer.open{transform:translateY(0);}
.about-close{
  position:absolute; top:92px; right:40px;
  background:none; border:1px solid var(--ink); border-radius:999px;
  width:38px; height:38px; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}
.about-inner{
  max-width:980px; margin:0 auto; padding:130px 48px 100px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.about-figure{position:relative;}
.about-figure img#aboutMe{width:100%; border-radius:18px; image-rendering:pixelated;}
.speech-bubble{
  position:absolute; top:6%; right:4%;
  background:#fff;
  border:3px solid var(--ink);
  padding:8px 14px 16px;
  font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:0.02em;
  color:var(--ink);
  clip-path:polygon(0% 0%,100% 0%,100% 70%,30% 70%,18% 100%,18% 70%,0% 70%);
  opacity:0; transform:translateY(6px) scale(0.9);
  transition:opacity .25s steps(3,end), transform .25s steps(3,end);
  z-index:3;
}
.speech-bubble.mini{
  top:-38px; left:50%; right:auto;
  transform:translateX(-50%) translateY(6px) scale(0.9);
  padding:5px 10px 10px;
  font-size:12px;
  white-space:nowrap;
}
.speech-bubble.mini.show{transform:translateX(-50%) translateY(0) scale(1);}
@keyframes aboutLookUp{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-4px) rotate(-0.6deg);}
}
#aboutMe.do-look{animation:aboutLookUp 1.1s ease;}
.about-text .section-label{margin-bottom:22px;}
.about-bio{font-family:var(--serif); font-size:26px; line-height:1.5; font-weight:500;}

@media (max-width:820px){
  .about-inner{grid-template-columns:1fr; padding-top:110px;}
}

/* ============ Footer ============ */
.site-footer{
  padding:110px 48px 40px;
  text-align:center;
  position:relative;
}
.footer-headline{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,4vw,44px);
  margin:0 0 14px;
}
.footer-headline .accent{color:var(--orange-text);}
.footer-sub{color:var(--ink-soft); font-size:14.5px; margin:0 0 26px;}
.footer-links{display:flex; gap:26px; justify-content:center; margin-bottom:100px; position:relative; z-index:10;}
.footer-links a{font-size:13px; letter-spacing:.1em; position:relative; padding-bottom:3px; display:inline-block; cursor:pointer; pointer-events:auto; opacity:0.85; color:var(--ink); transition:opacity .2s ease, color .2s ease, transform .2s ease;}
.footer-links a:hover{opacity:1; color:var(--orange-text); transform:translateY(-2px);}
.footer-bottom{
  position:relative;
  display:flex; justify-content:space-between; align-items:flex-end;
  border-top:1px solid rgba(36,32,26,0.16);
  padding-top:24px;
  font-size:12px; letter-spacing:.06em; color:var(--ink-soft);
  text-align:left;
  overflow:visible;
}
.footer-bottom .name{font-weight:700; color:var(--ink); letter-spacing:.08em;}
.footer-bottom .right{text-align:right;}
.footer-made{display:block; margin-top:4px; font-size:11px; opacity:.75;}
.footer-cat-wrap{
  position:absolute; left:0; top:-28px; width:40px; height:36px;
  opacity:0;
  z-index:3;
  will-change:transform;
}
.footer-cat-wrap.walking{opacity:1;}
.footer-cat{
  width:100%; height:100%; display:block;
  object-fit:contain;
  image-rendering:pixelated;
}


/* ============ Play / Journal ============ */
.play-overlay{
  position:fixed; inset:0; z-index:300;
  background:
    radial-gradient(ellipse 120% 85% at 50% 40%, rgba(255,252,244,0.55), transparent 62%),
    linear-gradient(180deg, #E7DCC5, #D8CBAE);
  opacity:0; pointer-events:none;
  transition:opacity .5s ease;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.play-overlay.active{opacity:1; pointer-events:all;}

.journal-scene{
  display:flex; flex-direction:column; align-items:center;
  gap:22px;
  width:100%; height:100%;
  padding:104px 40px 40px;
}

.journal-stage{
  perspective:3200px;
  /* sized from the spread's true aspect (2048x1144) and capped by viewport
     height via width, so the ratio never breaks and the two halves stay joined */
  width:min(94vw, 1720px, calc(84vh * 1.7902));
  aspect-ratio:2048 / 1144;
  position:relative;
  transform-style:preserve-3d;
  opacity:0; transform:translateY(16px) scale(.97) rotateX(3deg);
  transition:opacity .6s ease .1s, transform .6s cubic-bezier(.2,.75,.25,1) .1s;
}
.play-overlay.active .journal-stage{opacity:1; transform:translateY(0) scale(1) rotateX(3deg);}

/* soft contact shadow the book casts on the desk beneath it */
.book-shadow-cast{
  position:absolute;
  left:4%; right:4%; bottom:-34px; height:70px;
  background:radial-gradient(ellipse at center, rgba(40,28,16,0.30), rgba(40,28,16,0) 72%);
  filter:blur(3px);
  z-index:1;
}

.journal-book{
  position:relative; width:100%; height:100%;
  perspective:3200px;
  z-index:4;
}

/* the settled spread — left-page and right-page photos placed directly
   edge to edge (no gap) so they read as one continuous open book */
.journal-spread{
  position:absolute; inset:0;
  display:flex; align-items:stretch;
  z-index:1;
}
.journal-page-img{
  flex:1 1 50%; min-width:0; height:100%;
  object-fit:contain;
  display:block;
}
/* pin each half to the spine so the pair always reads as one open book */
.journal-page-img:first-child{ object-position:right center; }
.journal-page-img:last-child{  object-position:left center; }

/* thin static shadow line marking the spine, drawn over the seam
   rather than as a gap between the two page images */
.journal-spine-seam{
  position:absolute; left:50%; top:2%; bottom:2%; width:16px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(20,14,8,0.22), rgba(20,14,8,0) 45%, rgba(20,14,8,0) 55%, rgba(20,14,8,0.22));
  z-index:3;
  pointer-events:none;
  display:none; /* the photos already carry a real spine; the overlay now just sticks out past the pages */
}

/* each half of the book turns independently, hinged at the spine —
   only the half that was clicked ever rotates */
.flip-leaf{
  position:absolute; top:0; bottom:0; width:50%;
  transform-style:preserve-3d;
  z-index:50;
  pointer-events:none;
}
.flip-leaf[hidden]{display:none;}
.flip-leaf-right{ right:0; transform-origin:0% 50%; }
.flip-leaf-left{  left:0;  transform-origin:100% 50%; }
.flip-face{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden;
  background:transparent;
}
.flip-face img{
  width:100%; height:100%; object-fit:contain;
  display:block;
}
/* spine edge of each turning leaf: right leaf hinges on its left edge, left leaf on its right */
.flip-leaf-right .flip-front img{ object-position:left center; }
.flip-leaf-right .flip-back img{  object-position:right center; }
.flip-leaf-left  .flip-front img{ object-position:right center; }
.flip-leaf-left  .flip-back img{  object-position:left center; }
.flip-back{ transform:rotateY(180deg); }

/* Page-turn shading. It's masked with the page photo itself (--face-img is set
   from JS), so the shade only ever falls on paper -- never on the desk around it. */
.face-shade{
  position:absolute; inset:0;
  opacity:0;
  pointer-events:none;
  z-index:60;
  transition:opacity .85s ease;
  -webkit-mask-image:var(--face-img); mask-image:var(--face-img);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}
/* the shade is darkest at the spine, and each face's spine edge differs */
.flip-leaf-right .flip-front .face-shade{ background:linear-gradient(90deg,  rgba(30,20,10,0.30), transparent 55%); -webkit-mask-position:left center;  mask-position:left center; }
.flip-leaf-right .flip-back  .face-shade{ background:linear-gradient(270deg, rgba(30,20,10,0.30), transparent 55%); -webkit-mask-position:right center; mask-position:right center; }
.flip-leaf-left  .flip-front .face-shade{ background:linear-gradient(270deg, rgba(30,20,10,0.30), transparent 55%); -webkit-mask-position:right center; mask-position:right center; }
.flip-leaf-left  .flip-back  .face-shade{ background:linear-gradient(90deg,  rgba(30,20,10,0.30), transparent 55%); -webkit-mask-position:left center;  mask-position:left center; }
.flip-leaf.shade-on .face-shade{opacity:1; transition:opacity .42s ease .05s;}

.turn-zone{
  position:absolute; top:0; bottom:0; width:50%;
  z-index:20;
  cursor:pointer;
}
.turn-zone.left{left:0;}
.turn-zone.right{right:0;}

@media (max-width:760px){
  .journal-scene{padding:96px 16px 28px;}
  .journal-stage{width:min(100%, calc(70vh * 1.7902));}
}
/* ============ Utility ============ */
.hidden-scroll{overflow:hidden;}

/* ============ Desk objects (pixel art, side margins of the journal) ============ */
.play-overlay{ --px:4px; }
.desk-mug, .desk-pencil{
  position:absolute; pointer-events:none; z-index:2;
  opacity:0; transition:opacity .8s ease .5s;
}
.play-overlay.active .desk-mug, .play-overlay.active .desk-pencil{opacity:1;}
.desk-mug img, .desk-pencil{
  image-rendering:pixelated; display:block;
  filter:drop-shadow(0 calc(var(--px) * 1.2) 0 rgba(70,45,20,0.16));
}
.desk-mug{ left:calc(var(--px) * 5); bottom:16vh; width:calc(var(--px) * 30); }
.desk-mug img{ width:100%; height:auto; }
.desk-pencil{ right:calc(var(--px) * 6); bottom:22vh; width:calc(var(--px) * 32); height:auto; }

/* steam: three pixel wisps that rise, sway in steps and fade */
.steam{
  position:absolute; bottom:calc(var(--px) * 17); width:calc(var(--px) * 7); height:calc(var(--px) * 14);
  background:url('images/desk/steam.png') no-repeat center / 100% 100%;
  image-rendering:pixelated;
  opacity:0;
  animation:steamRise 3.6s steps(9,end) infinite;
}
.steam.s1{ left:calc(var(--px) * 6);  animation-delay:0s; }
.steam.s2{ left:calc(var(--px) * 10); animation-delay:1.2s; }
.steam.s3{ left:calc(var(--px) * 14); animation-delay:2.4s; }
@keyframes steamRise{
  0%  { transform:translate(0, 0); opacity:0; }
  15% { opacity:.9; }
  50% { transform:translate(calc(var(--px) * 1), calc(var(--px) * -8)); }
  100%{ transform:translate(calc(var(--px) * -1), calc(var(--px) * -17)); opacity:0; }
}
@media (min-width:1700px){ .play-overlay{ --px:5px; } }
/* not enough side margin: tuck the objects under the book instead */
@media (max-width:1100px){
  .play-overlay{ --px:3px; }
  .desk-mug{ left:8vw; bottom:4vh; }
  .desk-pencil{ right:9vw; bottom:5vh; }
}

/* ============ Case cards: always-visible labels where there's no hover ============ */
/* Phones/tablets can't hover, so the title + hook sit on the card's "mat" (like a
   museum label) instead of appearing on hover. Desktop keeps the hover reveal. */
@media (hover:none), (max-width:900px){
  .case-card .card-overlay{
    position:static; inset:auto;
    opacity:1; transform:none;
    background:none;
    padding:16px 6px 4px;
    pointer-events:auto;
  }
  .card-overlay .title{ color:var(--ink); font-size:24px; margin:0 0 8px; }
  .card-overlay .hook{ color:#3D372E; opacity:1; font-size:14.5px; margin:0 0 14px; }
  .card-overlay .view-project{ color:var(--ink); border-bottom-color:rgba(36,32,26,0.45); }
  .case-card:hover{ transform:none; }
}
/* keyboard users get the same reveal as hover on desktop */
.case-card:focus-visible{ outline:2px solid var(--orange-text); outline-offset:6px; }
.case-card:focus-visible .card-overlay{ opacity:1; transform:translateY(0); }

/* ============ Experience (text-only, confidential work) ============ */
.experience{ padding-top:0; padding-bottom:120px; }
.xp-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(36,32,26,0.16); }
.xp-item{
  display:grid; grid-template-columns:200px 1fr; gap:8px 40px;
  padding:30px 0; border-bottom:1px solid rgba(36,32,26,0.16);
}
.xp-when{ margin:4px 0 0; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.xp-role{ margin:0; font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.25; color:var(--ink); }
.xp-org{ margin:4px 0 12px; font-size:15px; color:var(--ink-soft); }
.xp-desc{ margin:0; max-width:680px; font-size:16px; line-height:1.65; color:var(--ink); }
.xp-note{ margin:22px 0 0; font-size:14px; font-style:italic; color:var(--ink-soft); }
@media (max-width:700px){
  .experience{ padding-bottom:80px; }
  .xp-item{ grid-template-columns:1fr; gap:6px; padding:24px 0; }
  .xp-role{ font-size:23px; }
}

/* ============ Mobile nav: keep every link visible, no wrapping ============ */
@media (max-width:640px){
  .site-nav{ padding:16px 18px; }
  .nav-name{ font-size:13.5px; letter-spacing:0.04em; white-space:nowrap; }
  .nav-links{ gap:13px; }
  .nav-links button, .nav-links a{ font-size:11px; letter-spacing:0.07em; }
}
@media (max-width:430px){ .nav-last{ display:none; } }
@media (max-width:380px){
  .site-nav{ padding:16px 14px; }
  .nav-name{ font-size:12.5px; }
  .nav-links{ gap:10px; }
  .nav-links button, .nav-links a{ font-size:10.5px; letter-spacing:0.05em; }
}

/* ============ Aesthetic bridge: ties the dark card photos to the cream page ============ */

/* A quiet full-bleed band behind each section label, so "THE CASE STUDIES" and
   "EXPERIENCE" read as the start of one continuous content zone rather than
   labels floating on plain cream. */
.section-band{
  position:relative;
  margin:0 -48px 28px;
  padding:22px 48px 14px;
  background:var(--cream-deep);
  border-bottom:1px solid rgba(36,32,26,0.08);
}
.section-band .section-label{ margin:0; }
@media (max-width:640px){ .section-band{ margin:0 -20px 22px; padding:16px 20px 12px; } }

/* Each case card gets a 2px edge sampled from its own thumbnail's dominant color,
   so the dark photo doesn't cut into the cream card with a hard, unrelated edge. */
.case-card:nth-child(1) .poster-frame{ border-top:2px solid #6C64AC; } /* Mono: cobalt-violet from the app */
.case-card:nth-child(2) .poster-frame{ border-top:2px solid #2E2344; } /* hEar: deep plum from the device shot */
.case-card:nth-child(3) .poster-frame{ border-top:2px solid #647571; } /* One Moment, Two Users: the teal folder on the desk */

/* The same teal, reused as a small hover accent in Experience, so one real color
   from the work itself threads through the rest of the page. */
.xp-item{ transition:background-color .25s ease; }
.xp-item:hover{ background:rgba(100,117,113,0.06); margin:0 -16px; padding-left:16px; padding-right:16px; }
.xp-item:hover .xp-role{ color:#4F5F5C; }
.xp-item .xp-role{ transition:color .25s ease; }

/* ============ Hero: fill the composition (background mark, shared wash, more pool life) ============ */

/* A soft low-opacity wash that sits behind BOTH the text and the pool, so the
   two halves read as one composition instead of two things placed side by side. */
.hero-wash{
  position:absolute; inset:-10% -6% -10% -6%;
  z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 62% 70% at 62% 52%, rgba(107,150,150,0.16), transparent 72%);
}

/* A large, faint wave outline behind the headline -- an echo of the pool, not a
   literal repeat of it -- so the empty cream around the text has something to hold. */
.hero-wave-mark{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  overflow:visible;
}
.hero-wave-mark path{ fill:none; stroke-width:2.5; stroke-linecap:round; }
.hero-wave-mark .w1{ stroke:rgba(107,117,113,0.07); }
.hero-wave-mark .w2{ stroke:rgba(107,117,113,0.11); }

@media (max-width:900px){
  .hero-wave-mark{ opacity:.6; }
}

/* Work now flows straight into the footer (Experience section removed) --
   tighten the gap between them so it doesn't read as leftover empty space. */
#work + .site-footer{ padding-top:44px; }

/* Handwritten "this one!" pointer next to the hero CTA. */
.cta-row{ position:relative; display:inline-flex; align-items:center; }
.cta-arrow{ position:absolute; left:100%; top:-16px; margin-left:0; }
.cta-note{
  position:absolute; left:100%; top:-10px; margin-left:74px;
  font-family:var(--hand); font-size:23px; font-weight:600;
  color:var(--orange-text); white-space:nowrap; transform:rotate(-3deg);
}
@media (max-width:900px){ .cta-arrow, .cta-note{ display:none; } }

/* ============ Wind: green leaves blowing in from the left ============ */
.wind-leaves{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.wind-leaf{
  position:absolute; left:0; top:var(--top); width:var(--size);
  opacity:0; will-change:transform;
  animation:windTravel var(--dur) linear var(--delay) infinite;
}
.wind-leaf img{
  display:block; width:100%; image-rendering:pixelated;
  animation:leafTumble var(--flutter) ease-in-out var(--delay) infinite;
}
/* travel in the first ~55% of the cycle, then rest off-screen so leaves arrive in gusts */
@keyframes windTravel{
  0%{ transform:translate3d(-12vw,0,0); opacity:0; }
  4%{ opacity:.9; }
  35%{ transform:translate3d(35vw,calc(var(--drift)*.35),0); }
  74%{ opacity:.9; }
  80%{ transform:translate3d(112vw,var(--drift),0); opacity:0; }
  100%{ transform:translate3d(112vw,var(--drift),0); opacity:0; }
}
@keyframes leafTumble{
  0%,100%{ transform:translateY(0) rotate(-20deg) scaleY(1); }
  25%{ transform:translateY(-22px) rotate(70deg) scaleY(.45); }
  50%{ transform:translateY(6px) rotate(160deg) scaleY(1); }
  75%{ transform:translateY(-14px) rotate(250deg) scaleY(.5); }
}
@media (max-width:900px){ .wind-leaf:nth-child(n+21){ display:none; } }

/* ============ Onsen: rising steam + a maple tree swaying in the wind ============ */
.onsen-base{ width:100%; height:auto; display:block; }
.onsen-tree{
  position:absolute; left:6.65%; top:0.6%; width:27.4%; height:auto;
  transform-origin:29% 100%;           /* hinge at the trunk, so the crown sways most */
  animation:treeSway 9s ease-in-out infinite;
  will-change:transform;
}
@keyframes treeSway{
  0%,100%{ transform:rotate(0deg) skewX(0deg); }
  18%{ transform:rotate(2.2deg) skewX(-1deg); }
  30%{ transform:rotate(.6deg); }
  48%{ transform:rotate(2.8deg) skewX(-1.4deg); }
  62%{ transform:rotate(-.8deg) skewX(.6deg); }
  80%{ transform:rotate(-1.6deg) skewX(1deg); }
}
.onsen-steam{ position:absolute; inset:0; overflow:visible; }
.onsen-wisp{
  position:absolute; width:3.4%; height:auto;
  image-rendering:pixelated;
  opacity:0; will-change:transform,opacity;
  animation:onsenSteamRise 8s ease-out infinite;
}
@keyframes onsenSteamRise{
  0%{   transform:translate(0,14px) scale(.8);   opacity:0; }
  18%{  opacity:.75; }
  45%{  transform:translate(7px,-34px) scale(1); }
  70%{  transform:translate(-6px,-70px) scale(1.15); opacity:.45; }
  100%{ transform:translate(5px,-112px) scale(1.3); opacity:0; }
}
@media (max-width:900px){ .pool-stage{ width:min(62vw, 380px); right:-10vw; } .onsen-wisp:nth-child(n+6){ display:none; } }
@media (prefers-reduced-motion:reduce){ .onsen-tree, .onsen-wisp{ animation:none; } .onsen-wisp{ opacity:.4; } }