/* ============================================================
   Klyppy Lab Studio — holding page styles (style.css)
   Extracted from index.html — link with:
   <link rel="stylesheet" href="style.css">
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0F0D09;--amber:#F5A623;--gold:#C49020;--cream:#EDE5CF;--muted:#6B5D3F}
html,body{min-height:100%;background:var(--bg);color:var(--cream);overflow-x:hidden}
canvas#bg{position:fixed;inset:0;z-index:0;pointer-events:none}

/* film grain */
body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.038'/%3E%3C/svg%3E");opacity:.5}

/* ── FLOATING ORBS ── */
.orbs{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(245,166,35,.55),rgba(196,144,32,.12) 55%,transparent 72%);
  filter:blur(.4px);opacity:0;animation:rise linear infinite}
@keyframes rise{
  0%{transform:translateY(30px) translateX(0);opacity:0}
  12%{opacity:.9}
  88%{opacity:.7}
  100%{transform:translateY(-112vh) translateX(var(--drift,14px));opacity:0}
}

main{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:56px 24px 132px}

/* ── HERO LOGO (attached banner) ── */
.hero-logo{width:min(500px,92vw);margin-bottom:30px}
.hero-logo svg{width:100%;height:auto;display:block}

.rule{width:52px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:6px 0 22px}

.tag{font-family:'Space Grotesk',sans-serif;font-size:.68rem;letter-spacing:.46em;
  text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:26px;text-align:center}

.copy{font-family:'Space Grotesk',sans-serif;font-size:.98rem;line-height:1.85;
  color:var(--cream);opacity:.56;text-align:center;max-width:352px;
  font-weight:300;margin-bottom:40px}
.copy b{color:var(--amber);opacity:.92;font-weight:400}

/* ── SOCIAL ROW ── */
.social-row{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap}
.social-row a{display:flex;color:var(--muted);opacity:.6;text-decoration:none;
  transition:color .2s,opacity .2s,transform .2s}
.social-row a:hover,.social-row a:focus-visible{color:var(--amber);opacity:1;transform:translateY(-3px);outline:none}
.social-row svg{width:20px;height:20px;fill:currentColor}

/* ── CORNER LOCKUP ── */
.lockup{position:fixed;right:26px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:3;width:86px;height:86px;
  animation:glow 4s ease-in-out infinite}
.lockup svg{width:100%;height:100%;display:block}
@keyframes glow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(200,159,224,.85)) drop-shadow(0 0 9px rgba(154,95,209,.55)) drop-shadow(0 0 20px rgba(155,89,182,.25))}
  50%    {filter:drop-shadow(0 0 5px rgba(200,159,224,1)) drop-shadow(0 0 14px rgba(154,95,209,.9)) drop-shadow(0 0 34px rgba(155,89,182,.45))}
}

/* ── FOOTER ── */
footer{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:24px 24px 26px;text-align:center;
  font-family:'Space Grotesk',sans-serif}
/* on narrower desktop windows the centred links row could reach the corner
   lockup — reserve equal space both sides so it stays centred AND clear */
@media (max-width:900px) and (min-width:561px){
  footer{padding:22px 112px 24px}
}
.foot-site{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);opacity:.7;margin-bottom:9px}
.foot-legal{font-size:.6rem;letter-spacing:.16em;color:var(--muted);opacity:.72;
  line-height:1.9}
.foot-legal a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(107,93,63,.35);
  padding-bottom:1px;transition:color .18s,border-color .18s}
.foot-legal a:hover,.foot-legal a:focus-visible{color:var(--amber);border-color:rgba(245,166,35,.5);outline:none}
.foot-sep{margin:0 8px;opacity:.5}
.foot-copy{display:block;margin-top:7px;font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);opacity:.55}

/* ── ENTRANCE ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes breathe{
  0%,100%{filter:drop-shadow(0 0 10px rgba(245,166,35,.34)) drop-shadow(0 0 34px rgba(245,166,35,.12))}
  50%    {filter:drop-shadow(0 0 22px rgba(245,166,35,.62)) drop-shadow(0 0 62px rgba(245,166,35,.22))}
}
.hero-logo {animation:fadeUp .9s ease both,breathe 4.8s ease-in-out 1s infinite}
.rule      {animation:fadeUp .6s ease both .40s}
.tag       {animation:fadeUp .6s ease both .55s}
.copy      {animation:fadeUp .6s ease both .70s}
.social-row{animation:fadeUp .6s ease both .85s}
.lockup    {animation:fadeUp .7s ease both 1s, glow 4s ease-in-out 1.4s infinite}
footer     {animation:fadeUp .6s ease both 1.1s}

@media (max-width:560px){
  main{padding:44px 22px 132px}
  .lockup{width:60px;height:60px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  footer{padding:20px 78px calc(20px + env(safe-area-inset-bottom,0px)) 78px}
  .foot-legal{line-height:2}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .orbs{display:none}
}

/* ══ LIMINAL GIRL — GENIE TEASER (scoped) ══ */
.lockup{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#lgGenie{position:fixed;inset:0;z-index:9900;display:none;align-items:center;justify-content:center;
  padding:24px;
  --bg:#0e0818;--ink:#9B59B6;--brand:#9a5fd1;--deep:#6A3A8A;--ghost:#C89FE0;
  --mid:#B890D0;--mute:#9A70B8;--rule:#7D3FA3;--dim:#7A50A0;--amber:#F5A623}
#lgGenie.on{display:flex}
#lgGenie .lg-veil{position:absolute;inset:0;background:rgba(7,4,12,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  cursor:pointer;touch-action:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
#lgGenie.on .lg-veil{animation:lgVeilIn .5s ease both}
#lgGenie.closing .lg-veil{animation:lgVeilOut .65s ease both}
@keyframes lgVeilIn{from{opacity:0}to{opacity:1}}
@keyframes lgVeilOut{from{opacity:1}to{opacity:0}}

#lgGenie .card{position:relative;width:min(720px,92vw,147vh);height:calc(min(720px,92vw,147vh)*.58333);background:var(--bg);
  border:1px solid rgba(155,89,182,.18);border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 34px 90px rgba(0,0,0,.78),0 10px 34px rgba(0,0,0,.6),0 0 70px rgba(155,89,182,.22);
  will-change:transform,opacity}
@supports (aspect-ratio:720/420){#lgGenie .card{height:auto;aspect-ratio:720/420}}
#lgGenie.on .card{animation:lgGenieIn .9s cubic-bezier(.25,.8,.3,1) both}
#lgGenie.closing .card{animation:lgGenieOut .75s cubic-bezier(.55,.04,.7,.3) both}
/* transform + opacity only — these run on the compositor thread so the flight
   stays smooth even when the page is busy; the previous animated blur() forced
   per-frame re-rasterisation, which is what caused the stutter on mobile */
@keyframes lgGenieIn{
  0%  {transform:translate3d(var(--gx,38vw),var(--gy,38vh),0) scale(.04,.1) rotate(4deg);opacity:0}
  30% {opacity:1;transform:translate3d(calc(var(--gx,0px)*.5),calc(var(--gy,0px)*.62),0) scale(.3,.5) rotate(-2.5deg)}
  70% {transform:translate3d(calc(var(--gx,0px)*.06),calc(var(--gy,0px)*.08),0) scale(.94,.97) rotate(.8deg)}
  88% {transform:translate3d(0,0,0) scale(1.02,.99) rotate(0deg)}
  100%{transform:translate3d(0,0,0) scale(1);opacity:1}
}
@keyframes lgGenieOut{
  0%  {transform:translate3d(0,0,0) scale(1);opacity:1}
  25% {transform:translate3d(calc(var(--gx,0px)*.06),calc(var(--gy,0px)*.08),0) scale(.9,1.01) rotate(1.5deg)}
  68% {opacity:.85;transform:translate3d(calc(var(--gx,0px)*.55),calc(var(--gy,0px)*.68),0) scale(.22,.42) rotate(-3deg)}
  100%{transform:translate3d(var(--gx,38vw),var(--gy,38vh),0) scale(.03,.08) rotate(4deg);opacity:0}
}
/* while the genie is in flight, pause the card's internal animations so
   nothing competes with the flight for frames */
#lgGenie.moving .scene,#lgGenie.moving .mote,
#lgGenie.moving .slit,#lgGenie.moving .floorglow{animation-play-state:paused}

/* amber puff at the lamp on launch/return */
.lg-puff{position:fixed;z-index:9901;width:26px;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(154,95,209,.92),rgba(245,166,35,.28) 55%,transparent 75%);
  transform:translate(-50%,-50%) scale(.3);opacity:0;animation:lgPuff .6s ease-out both}
@keyframes lgPuff{0%{opacity:.95;transform:translate(-50%,-50%) scale(.3)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.6)}}

/* ── card internals (verbatim teaser, scoped + keyframes renamed) ── */
#lgGenie .ch{position:absolute;top:14px;right:16px;font-family:'Josefin Sans',sans-serif;font-weight:300;
  font-size:.6rem;letter-spacing:.25em;color:var(--ink);opacity:.3;z-index:4}
#lgGenie .motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
@keyframes lgRiseUp{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:var(--op,.4)}
  85%{opacity:var(--op,.4)}
  100%{transform:translateY(-460px) translateX(var(--drift,0px));opacity:0}
}
#lgGenie .mote{position:absolute;bottom:-4px;border-radius:50%;pointer-events:none;
  animation:lgRiseUp linear infinite}
#lgGenie .scene{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  animation:lgBob 10s ease-in-out infinite;width:100%}
@keyframes lgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#lgGenie .the{font-family:'Josefin Sans',sans-serif;font-weight:200;font-size:clamp(9px,1.5vw,11px);
  letter-spacing:.7em;padding-left:.7em;color:var(--mute);text-transform:uppercase;margin-bottom:12px}
#lgGenie .titlezone{position:relative;height:26px;margin-bottom:26px;display:flex;align-items:center;justify-content:center}
#lgGenie .bars{display:flex;gap:8px;position:relative;z-index:2;transition:opacity .1s linear}
#lgGenie .bar{height:20px;border-radius:3px;
  background:repeating-linear-gradient(45deg,#1a0f2a 0px,#1a0f2a 2.5px,var(--brand) 2.5px,var(--brand) 4.5px)}
#lgGenie .b1{width:clamp(64px,13vw,96px)}#lgGenie .b2{width:clamp(48px,10vw,70px)}#lgGenie .b3{width:clamp(20px,4vw,30px)}
#lgGenie .ghost-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Rubik Marker Hatch',sans-serif;font-size:clamp(17px,3.2vw,24px);letter-spacing:.14em;
  color:var(--ghost);opacity:0;filter:blur(1px);white-space:nowrap;z-index:1;
  text-shadow:0 0 12px rgba(200,159,224,.6)}
#lgGenie .card.slip .bars{opacity:.06}
#lgGenie .card.slip .ghost-title{opacity:.85}
#lgGenie .door{position:relative;width:clamp(58px,11vw,78px);height:clamp(136px,26vw,180px);
  border:1.6px solid var(--deep);border-radius:2px}
#lgGenie .knob{position:absolute;right:11%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--rule)}
#lgGenie .slit{position:absolute;left:2px;right:2px;bottom:-4px;height:3px;border-radius:2px;background:#FFD98A;
  animation:lgSlitBreathe 6s ease-in-out infinite}
@keyframes lgSlitBreathe{
  0%,100%{opacity:.85;box-shadow:0 0 10px 2px rgba(245,166,35,.8),0 0 26px 8px rgba(245,166,35,.35)}
  50%{opacity:1;box-shadow:0 0 15px 3px rgba(245,166,35,.95),0 0 44px 16px rgba(245,166,35,.5)}
}
#lgGenie .floorglow{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  width:200%;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(245,166,35,.28),transparent 70%);
  animation:lgFloorBreathe 6s ease-in-out infinite}
@keyframes lgFloorBreathe{0%,100%{opacity:.7}50%{opacity:1}}
#lgGenie .tag{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(14px,2.6vw,19px);
  color:var(--mid);margin-top:30px;text-align:center;padding:0 20px;
  letter-spacing:normal;text-transform:none;margin-bottom:0;font-weight:400}
#lgGenie .sub{font-family:'Josefin Sans',sans-serif;font-weight:200;font-size:clamp(7px,1.3vw,9px);
  letter-spacing:.5em;padding-left:.5em;color:var(--dim);text-transform:uppercase;margin-top:14px}

/* ── genie card on phones: portrait, content-hugging — the fixed 720:420
   landscape ratio is too short at phone widths and clips the text ── */
@media (max-width:560px){
  #lgGenie{padding:18px}
  /* backdrop blur is expensive on phone GPUs and competes with the flight —
     dim only on mobile, slightly darker to compensate */
  #lgGenie .lg-veil{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,4,12,.74)}
  #lgGenie .card{width:min(88vw,380px);height:auto;aspect-ratio:auto;
    max-height:84vh;max-height:84svh;padding:38px 20px 34px}
  #lgGenie .the{font-size:10px;margin-bottom:10px}
  #lgGenie .titlezone{margin-bottom:20px}
  #lgGenie .ghost-title{font-size:19px}
  #lgGenie .door{width:62px;height:128px}
  #lgGenie .tag{font-size:15px;margin-top:24px}
  #lgGenie .sub{font-size:8px;margin-top:12px}
}