/* ---------- loading ---------- */
  #loading{position:fixed;inset:0;background:var(--night);display:flex;flex-direction:column;
    gap:14px;align-items:center;justify-content:center;z-index:60;transition:opacity 1.4s ease}
  #loading .orb{width:10px;height:10px;border-radius:50%;background:var(--gold);
    box-shadow:0 0 24px 8px rgba(255,217,140,0.5);animation:pulse 1.6s ease-in-out infinite}
  #loading p{font-family:var(--display);color:var(--ink);font-style:normal;letter-spacing:0.02em;
    font-size:clamp(22px,3.4vw,38px);text-shadow:0 0 34px rgba(255,217,140,0.20);opacity:0.92}
  /* ---------- opening title ---------- */
  #intro{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
    background:var(--night);padding:8vw;text-align:center;transition:opacity 1.8s ease}
  #intro p{font-family:var(--display);font-size:clamp(26px,5.4vw,64px);line-height:1.35;
    color:var(--ink);letter-spacing:0.02em;opacity:0;transform:translateY(12px);
    transition:opacity 2.2s ease,transform 2.2s ease;text-shadow:0 0 44px rgba(255,217,140,0.22)}
  #intro.on p{opacity:1;transform:none}
  #intro.out{opacity:0;pointer-events:none}
  @media (prefers-reduced-motion: reduce){ #intro p{transition:opacity .6s ease} }
  /* ---------- landing: the forest through mist, until the door is opened ---------- */
  #landing{position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;
    background:rgba(4,9,16,0.40);-webkit-backdrop-filter:blur(3px) saturate(0.9);backdrop-filter:blur(3px) saturate(0.9);color:#fff;
    transition:opacity 1.4s ease 1.3s, backdrop-filter 2.4s ease, -webkit-backdrop-filter 2.4s ease;overflow:hidden}
  #landing.clear{opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
  #landing .fog{position:absolute;inset:-35%;pointer-events:none;mix-blend-mode:screen;opacity:0.95;
    transition:opacity 2.6s ease, transform 2.6s ease}
  #landing .fogWrap{position:absolute;inset:0;pointer-events:none;animation:fogFlick 4.3s steps(1) infinite}
  @keyframes fogFlick{0%{opacity:.92}9%{opacity:1}17%{opacity:.86}31%{opacity:.97}44%{opacity:.9}58%{opacity:1}66%{opacity:.84}80%{opacity:.95}100%{opacity:.92}}
  #landing .lgrain{position:absolute;top:-60%;left:-60%;width:220%;height:220%;pointer-events:none;opacity:0.42;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
    background-size:200px 200px;animation:grainDrift 420ms steps(1) infinite, fogFlick 2.9s steps(1) infinite}
  #landing.clear .lgrain{opacity:0;transition:opacity 1.6s ease}
  #landing .f1{background:radial-gradient(ellipse 52% 44% at 32% 42%, rgba(212,224,230,0.58), rgba(212,224,230,0) 70%);
    animation:fogA 26s ease-in-out infinite alternate}
  #landing .f2{background:radial-gradient(ellipse 58% 40% at 70% 58%, rgba(198,212,220,0.52), rgba(198,212,220,0) 70%);
    animation:fogB 31s ease-in-out infinite alternate}
  #landing .f3{background:radial-gradient(ellipse 80% 48% at 50% 78%, rgba(186,202,212,0.46), rgba(186,202,212,0) 72%);
    animation:fogC 37s ease-in-out infinite alternate}
  #landing.clear .fog{opacity:0;transform:translateY(-8%) scale(1.14)!important}
  #landing.clear .fogWrap{animation:none}
  @keyframes fogA{from{transform:translate(-4%,-2%) scale(1)}to{transform:translate(4%,3%) scale(1.09)}}
  @keyframes fogB{from{transform:translate(3%,2%) scale(1.05)}to{transform:translate(-4%,-3%) scale(1)}}
  @keyframes fogC{from{transform:translate(-2%,3%) scale(1)}to{transform:translate(3%,-2%) scale(1.07)}}
  #landingFlies{position:absolute;inset:0;pointer-events:none}
  .landingInner{position:relative;text-align:center;padding:0 6vw;
    transition:opacity 1.1s ease, transform 1.1s ease}
  #landing.clear .landingInner{opacity:0;transform:translateY(-12px)}
  .landingTitle{display:flex;align-items:baseline;justify-content:center;font-weight:400;line-height:1;
    color:#f4f1ea;cursor:default}
  .landingTitle .seed{font-family:'Alte Haas Grotesk',Helvetica,Arial,sans-serif;font-size:clamp(42px,7.6vw,98px);
    letter-spacing:-0.025em;color:#ffffff;display:inline-block;transform:translateY(0.16em)}
  .landingTitle .grass{font-family:'Nocturne Cross Stitch',var(--display);font-size:clamp(50px,9.4vw,122px);
    margin-left:-0.04em;display:inline-block;color:#ffffff;transform:translateY(0.07em);
    text-shadow:0 0 30px rgba(255,255,255,0.12)}
  .landingTitle .grass span{display:inline-block;transform-origin:50% 100%}
  /* on hover the stitched letters lean and recover like grass in a breeze */
  .landingTitle:hover .grass span{animation:grassSway 1.7s ease-in-out infinite}
  .landingTitle .grass span:nth-child(2){animation-delay:.12s}
  .landingTitle .grass span:nth-child(3){animation-delay:.24s}
  .landingTitle .grass span:nth-child(4){animation-delay:.36s}
  @keyframes grassSway{0%,100%{transform:rotate(-3.5deg) translate(-2px,0)}50%{transform:rotate(4.5deg) translate(3px,-2px)}}
  #enterBtn{margin-top:clamp(46px,8vh,78px);min-width:min(360px,80vw)}
  .landingSoon{margin-top:14px;font-family:var(--font);font-weight:400;
    font-size:clamp(8px,0.85vw,10px);letter-spacing:0.36em;text-transform:uppercase;color:#ffffff}
  .landingLine{margin-top:clamp(30px,6vh,64px);font-family:'Nocturne Cross Stitch',var(--display);
    font-size:clamp(13px,1.7vw,21px);letter-spacing:0.06em;color:rgba(244,241,234,0.9)}
  @media (prefers-reduced-motion: reduce){ #landing .fog{animation:none} }