/* ===== Pale Channel — keep palette, add moving 'clouds' ===== */
:root{
  --ink: #ffffff;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--ink);
  font: 600 16px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  /* Static base gradient (same palette) */
  background:
    radial-gradient(40% 35% at 15% 20%, #cfc9ff 0%, rgba(207,201,255,0) 70%),
    radial-gradient(45% 40% at 85% 25%, #cfe8ff 0%, rgba(207,232,255,0) 70%),
    radial-gradient(42% 38% at 25% 85%, #ffd9c8 0%, rgba(255,217,200,0) 72%),
    radial-gradient(40% 36% at 85% 85%, #d7f7e8 0%, rgba(215,247,232,0) 70%),
    radial-gradient(30% 28% at 50% 55%, #fff3c7 0%, rgba(255,243,199,0) 65%),
    #f8f7ff;
  background-attachment: fixed;
  text-align: center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 24px;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
}
/* moving cloud layers (same colors) */
body::before,
body::after{
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}
body::before{
  background:
    radial-gradient(40% 35% at 15% 20%, #cfc9ff 0%, rgba(207,201,255,0) 70%),
    radial-gradient(45% 40% at 85% 25%, #cfe8ff 0%, rgba(207,232,255,0) 70%),
    radial-gradient(42% 38% at 25% 85%, #ffd9c8 0%, rgba(255,217,200,0) 72%),
    radial-gradient(40% 36% at 85% 85%, #d7f7e8 0%, rgba(215,247,232,0) 70%),
    radial-gradient(30% 28% at 50% 55%, #fff3c7 0%, rgba(255,243,199,0) 65%);
  filter: blur(10px);
  opacity: .9;
  animation: cloudDrift 18s linear infinite;
}
body::after{
  background-image: url('data:image/svg+xml;utf8,  <svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">    <filter id="n">      <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/>      <feColorMatrix type="saturate" values="0"/>      <feComponentTransfer>        <feFuncA type="table" tableValues="0 0 0 .03 .06 .08 .06 0"/>      </feComponentTransfer>    </filter>    <rect width="100%" height="100%" filter="url(%23n)"/>  </svg>');
  background-size: 240px 240px;
  mix-blend-mode: soft-light;
  opacity: .4;
  animation: cloudSkim 6s linear infinite;
}

@keyframes cloudDrift {
  0%   { transform: translate3d(-6vw,-4vh,0) scale(1.08); }
  50%  { transform: translate3d(6vw,4vh,0)  scale(1.10); }
  100% { transform: translate3d(-6vw,-4vh,0) scale(1.08); }
}
@keyframes cloudSkim {
  0%   { transform: translate3d(-20vw,0,0); opacity:.45; }
  50%  { transform: translate3d( 20vw,0,0); opacity:.35; }
  100% { transform: translate3d(-20vw,0,0); opacity:.45; }
}

.pc-header{ margin-top: 6vh; }
.logo { animation: kerningBreathe 8s ease-in-out 1 forwards, pcFloat  11s ease-in-out infinite alternate; }
@keyframes titleFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pc-main{ display:flex; align-items:center; justify-content:center; }
.pc-countdown{
  display:flex; gap: 18px; flex-wrap:wrap; justify-content:center; align-items:center;
  font-size: clamp(14px, 2.8vw, 22px);
  opacity: .95;
}
.pc-countdown > div{ min-width: 70px; }
.pc-countdown small{ display:block; font-size: .75em; opacity:.85; }

.pc-footer{ position: fixed; bottom: 14px; left: 0; right: 0; text-align:center; opacity: .85; font-size: 14px; }

/* ===== Per-letter liquid glass overlay (keeps base text visible) ===== */
.pc-glyph {
  display:inline-block;
  opacity: 0;
  transform: translateY(4px);
  filter: none;
  text-shadow: none;
  transition:
    opacity 1200ms cubic-bezier(.2,.8,.2,1),
    transform 1200ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}



.pc-glass-glyph {
  position: absolute;
  inset: -0.2em -0.12em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease;
  backdrop-filter: blur(2.5px) saturate(1.05) brightness(1.03) contrast(1.02);
  -webkit-backdrop-filter: blur(2.5px) saturate(1.05) brightness(1.03) contrast(1.02);
  background:
    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(80% 80% at 72% 78%,  rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 58%);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.22);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.pc-glass-glyph.on { opacity: 1; }

@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none !important; }
  .pc-glass-glyph{ display:none; }
}

/* countdown revert */
#countdown > div { display:flex; flex-direction:column; align-items:center; }

#countdown strong {
  display:block;
  font-weight: 600;
  font-size: clamp(13.50px, 3.75vw, 21.00px); /* larger like reference */
  line-height: 1.0;
  letter-spacing: 0.15px;
}


#countdown small {
  display:block;
  margin-top: 2px;               /* snug under number */
  font-weight: 400;
  font-size: clamp(12px, 2.4vw, 20px);
  opacity: .96;
}




/* Title sweep band (connected, left->right, ~2.2s) */
.logo{ position: relative; display:inline-block; }
.pc-sweep-text{ display:none; }


@keyframes sweepTitle{
  0%{ -webkit-mask-position:-20% 0%; mask-position:-20% 0%; }
  100%{ -webkit-mask-position:120% 0%; mask-position:120% 0%; }
}


/* === Title: left-to-right reveal with tiny magnify on each letter === */
.logo { position: relative; display:inline-block; }

.pc-glyph {
  display:inline-block;
  opacity: 0;
  transform: translateY(4px);
  filter: none;
  text-shadow: none;
  transition:
    opacity 1200ms cubic-bezier(.2,.8,.2,1),
    transform 1200ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}




.pc-glyph.revealed {
  opacity: 1;
  transform: translateY(0) scale(1); /* settle clean */
  /* tiny magnify/glass moment */
  filter: blur(.8px) brightness(1.04) contrast(1.01);
}

.pc-glyph.revealed.moment {
  /* brief extra pop right as it appears */
  transform: translateY(0) scale(1.03);
  filter: blur(1px) brightness(1.06) contrast(1.02);
}

@media (prefers-reduced-motion: reduce){
  .pc-glyph {
  display:inline-block;
  opacity: 0;
  transform: translateY(4px);
  filter: none;
  text-shadow: none;
  transition:
    opacity 1200ms cubic-bezier(.2,.8,.2,1),
    transform 1200ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}



}

/* refined clock */
#countdown > div { display:flex; flex-direction:column; align-items:center; }

#countdown strong {
  display:block;
  font-weight: 600;
  font-size: clamp(18px, 5vw, 28px); /* larger like reference */
  line-height: 1.0;
  letter-spacing: 0.2px;
}


#countdown small {
  display:block;
  margin-top: 2px;               /* snug under number */
  font-weight: 400;
  font-size: clamp(12px, 2.4vw, 20px);
  opacity: .96;
}





/* premium letter fade: understated, silky */
.logo { position: relative; display:inline-block; }
.pc-glyph {
  display:inline-block;
  opacity: 0;
  transform: translateY(4px);
  filter: none;
  text-shadow: none;
  transition:
    opacity 1200ms cubic-bezier(.2,.8,.2,1),
    transform 1200ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}




/* tiny liquid/gloss moment via clipped gradient (no harsh blur) */
.pc-glyph::after{
  content: attr(data-ch);
  position:absolute; left:0; top:0; pointer-events:none;
  background:
    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(80% 80% at 72% 78%,  rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 58%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0; transform: translateY(1px);
  transition: opacity 1000ms ease, transform 1000ms ease;
}




.pc-glyph.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pc-glyph.revealed::after {
  opacity: .7;  /* softer glint */
  transform: translateY(0);
  transition-duration: 380ms;
}
/* glint fades out smoothly after reveal */
.pc-glyph.gloss-off::after { opacity: 0; transition-duration: 900ms; }

@media (prefers-reduced-motion: reduce){
  .pc-glyph, .pc-glyph::after{
  content: attr(data-ch);
  position:absolute; left:0; top:0; pointer-events:none;
  background:
    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(80% 80% at 72% 78%,  rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 58%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0; transform: translateY(1px);
  transition: opacity 1000ms ease, transform 1000ms ease;
}



}


.pc-glyph.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* make base letter feel a touch 'clear' without artifacts */
  text-shadow: 0 0 0.5px rgba(255,255,255,.55);
}
.pc-glyph.revealed::after {
  opacity: .55;  /* quieter, more subtle liquid */
  transform: translateY(0);
  transition-duration: 900ms;
}
.pc-glyph.gloss-off::after { opacity: 0; transition-duration: 1200ms; }



.pc-glyph.revealed { opacity:1; transform: translateY(0); }
.pc-glyph.revealed::after { opacity:.45; transform: translateY(0); }
.pc-glyph.gloss-off::after { opacity:0; }

/* after the sequence completes, lock to CRISP text (no blur, no glow) */
._unused_final {
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  text-shadow:none !important;
}
._unused_final::after { display:none !important; opacity:0 !important; }


/* === Continuous slow 'swoosh' over the title (NASCAR-style blur tail) === */
.logo{ position: relative; display:inline-block; }

.pc-swoosh{ display:none !important; }

@keyframes pcSwoosh{
  0%   { -webkit-mask-position: -25% 50%; mask-position: -25% 50%; }
  100% { -webkit-mask-position: 125% 50%; mask-position: 125% 50%; }
}

/* Ensure base title stays CRISP between passes */
.logo, .logo .pc-glyph { filter:none !important; text-shadow:none !important; }


/* --- Title visibility hard-guard --- */
.logo {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* === Slow, dramatic breathing kerning + opacity (loops, ends at 100% opacity) === */
.logo { animation: kerningBreathe 8s ease-in-out 1 forwards, pcFloat  11s ease-in-out infinite alternate; }
@keyframes kerningBreathe {
  0%   { letter-spacing: 0.00em; opacity: 1; }
  45%  { letter-spacing: 0.04em;  opacity: 0.92; }
  55%  { letter-spacing: 0.04em;  opacity: 0.92; }
  100% { letter-spacing: 0.00em; opacity: 1; }
}

  40%  { letter-spacing: 0.12em; opacity: 0.80; }
  60%  { letter-spacing: 0.12em; opacity: 0.80; }
  100% { letter-spacing: 0.00em; opacity: 1; }
}

  40%  { letter-spacing: 0.12em; opacity: 0.80; }
  60%  { letter-spacing: 0.12em; opacity: 0.80; }
  100% { letter-spacing: 0.00em; opacity: 1; }
}

  40%  { letter-spacing: 0.035em; opacity: 0.88; }
  60%  { letter-spacing: 0.035em; opacity: 0.88; }
  100% { letter-spacing: 0.01em; opacity: 1;   } /* locks back to 100% each cycle */
}

/* Disable any previous overlay remnants if present */
.pc-swoosh, .pc-sweep-text, .pc-glass-glyph { display: none !important; }


/* === Global no-scroll + liquid touch lens === */
html, body { overscroll-behavior: none; }
body.noscroll { position: fixed; width: 100%; overflow: hidden; }

.pc-lens{
  position: fixed;
  width: var(--pc-lens-size, 50px);
  height: var(--pc-lens-size, 50px);
  left: 0; top: 0;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .14s ease;
  /* clear, liquid look */
  backdrop-filter: blur(6px) saturate(1.05) brightness(1.05) contrast(1.02);
  -webkit-backdrop-filter: blur(6px) saturate(1.05) brightness(1.05) contrast(1.02);
  background:
    radial-gradient(120% 120% at 22% 18%, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(80% 80% at 72% 78%,  rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 58%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 -10px 30px rgba(0,0,0,.08),
    0 1px 8px rgba(0,0,0,.06);
}
.pc-lens.pc-droplet{
  width: var(--pc-drop-size, 70px);
  height: var(--pc-drop-size, 70px);
  animation: lensTrail var(--pc-drop-life, 1100ms) ease-out forwards;
}
@keyframes lensTrail{
  0%   { opacity:.9; transform: translate(-50%,-50%) scale(.94); }
  70%  { opacity:.4; transform: translate(-50%,-50%) scale(1.04); }
  100% { opacity:0;   transform: translate(-50%,-50%) scale(1.08); }
}

  60%  { opacity:.35; transform: translate(-50%,-50%) scale(1.06); }
  100% { opacity:0;   transform: translate(-50%,-50%) scale(1.10); }
}

/* Make sure links/buttons don't steal the lens (still non-clickable per your spec) */
[data-lens-ignore] { pointer-events: auto; }
a, [role="link"] { pointer-events: auto; }


/* === Background dimmer (subtle; dims BG only) === */
.bg-dimmer{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.10); /* tweak 0.08–0.16 range to taste */
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above overlays */
.wrap, header, footer, .logo, #countdown { display:flex; flex-direction:row; justify-content:center; align-items:flex-start; gap: clamp(8px, 2vw, 16px); }

/* === Apple-clean transparent cloud layer (infinite loop) === */
.clouds{
  position: fixed;
  inset: -10% -10%;
  z-index: 1; /* between bg and content */
  pointer-events: none;
  overflow: hidden;
  filter: saturate(1.0) brightness(1.0) contrast(1.0);
}
.cloud{
  position: absolute;
  top: var(--y, 50%);
  left: -40%;
  width: var(--w, 38vw);
  height: calc(var(--w, 38vw) * .55);
  opacity: var(--o, .07); /* super subtle by default */
  transform: translateX(-10vw) translateY(calc(-50%));
  animation: cloudDrift var(--dur, 140s) linear infinite;
  /* soft white cloud made of overlapped radial gradients; 100% transparent edges */
  background:
    radial-gradient(closest-side at 30% 55%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    radial-gradient(closest-side at 55% 45%, rgba(255,255,255,.5), rgba(255,255,255,0) 62%),
    radial-gradient(closest-side at 70% 60%, rgba(255,255,255,.5), rgba(255,255,255,0) 58%),
    radial-gradient(closest-side at 45% 70%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(closest-side at 60% 35%, rgba(255,255,255,.28), rgba(255,255,255,0) 58%);
  filter: blur(var(--blur, 10px));
  border-radius: 40% / 55%;
}
/* slight parallax depth using scale and different speeds */
.cloud.depth-1 { --dur: 222.0s; --o: .06; --blur: 14px; transform: translateX(-10vw) translateY(calc(-50%)) scale(1.15); }
.cloud.depth-2 { --dur: 182.0s; --o: .07; --blur: 12px; transform: translateX(-10vw) translateY(calc(-50%)) scale(1.0); }
.cloud.depth-3 { --dur: 142.0s; --o: .085; --blur: 10px; transform: translateX(-10vw) translateY(calc(-50%)) scale(.92); }
.cloud.depth-4 { --dur: 112.0s; --o: .10; --blur: 8px;  transform: translateX(-10vw) translateY(calc(-50%)) scale(.86); }

@keyframes cloudDrift{
  0%   { transform: translateX(-20vw) translateY(calc(-50%)); }
  100% { transform: translateX(140vw) translateY(calc(-50%)); }
}

/* optional: gentle bobbing to keep them alive without calling attention */
.cloud.bob { animation-name: cloudDrift, cloudBob; animation-duration: var(--dur,140s), 16s; animation-timing-function: linear, ease-in-out; }
@keyframes cloudBob{
  0%,100% { transform: translateX(0) translateY(0); }
  50%     { transform: translateX(0) translateY(-0.6vh); }
}


/* === Ethereal Fog Banks (Apple-clean, white/clear), infinite drift with fade in/out === */
.fog-layer{
  position: fixed;
  inset: -15% -15%;
  z-index: 1; /* between background and content */
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: normal;
}
.fog{
  position: absolute;
  width: var(--w, 120vw);
  height: var(--h, 90vh);
  top: var(--y, 40%);
  left: var(--x, -30%);
  transform: translate(-50%,-50%) scale(var(--s,1));
  opacity: 0;
  filter: blur(var(--blur, 28px));
  /* Soft, clear-white fog using multiple radial gradients (no blue) */
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.0) 70%),
    radial-gradient(80% 80% at 60% 40%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.0) 75%),
    radial-gradient(70% 70% at 40% 60%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.0) 75%);
  border-radius: 50% / 55%;
  animation:
    fogDrift var(--dur, 260s) linear infinite,
    fogPulse var(--pulse, 22s) ease-in-out infinite;
  animation-direction: alternate, alternate;

}

/* Drift directions */
.fog.dir-lr { --x:-20%; --dx: 160vw; }
.fog.dir-rl { --x:120%; --dx:-160vw; }
.fog.dir-diag1 { --x:-20%; --dx: 160vw; --dy: -12vh; }
.fog.dir-diag2 { --x:120%; --dx:-160vw; --dy: 10vh; }

@keyframes fogDrift{
  0%   { transform: translate(calc(var(--x) * 1.0), calc(var(--y,40%) * 1.0)) scale(var(--s,1)); }
  100% { transform: translate(calc(var(--x) + var(--dx,160vw)), calc(var(--y,40%) + var(--dy,0))) scale(var(--s,1)); }
}
@keyframes fogPulse{
  0%, 100% { opacity: 0.00; }
  20%      { opacity: 0.06; }
  50%      { opacity: 0.10; } /* peak opacity */
  80%      { opacity: 0.06; }
}


/* === Floating rounded screen frame === */
body { margin:0; }
.app-frame{ transform: scale(1.06); transform-origin: 50% 50%;
  position: relative;
  width: min(96vw, 1200px);
  height: min(92vh, 900px);
  margin: clamp(8px, 2.5vw, 24px) auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 4px 16px rgba(0,0,0,0.25),
    0 1px 0 rgba(255,255,255,0.05) inset;
  /* center inner layout */
  display: block;
}

/* Ensure background + fog layers are clipped inside the frame */
.app-frame .bg-dimmer,
.app-frame .fog-layer{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Make main content sit above fog/dimmer */
.app-frame .wrap,
.app-frame header,
.app-frame footer,
.app-frame .logo,
.app-frame #countdown { display:flex; flex-direction:row; justify-content:center; align-items:flex-start; gap: clamp(8px, 2vw, 16px); }


/* === Subtle floating effect for the title (looks like it's gently hovering) === */
@keyframes pcFloat {
  0%   { transform: translateY(0);   text-shadow: 0 2px 6px rgba(0,0,0,0.10); }
  50%  { transform: translateY(-5px); text-shadow: 0 8px 20px rgba(0,0,0,0.14); }
  100% { transform: translateY(0);   text-shadow: 0 2px 6px rgba(0,0,0,0.10); }
}
  50%  { transform: translateY(-3px); text-shadow: 0 6px 16px rgba(0,0,0,0.14); }
  100% { transform: translateY(0);   text-shadow: 0 2px 6px rgba(0,0,0,0.10); }
}
/* keep existing animations (e.g., kerningBreathe) and add pcFloat alongside */
.logo {
  
}
@media (prefers-reduced-motion: reduce){
  .logo { animation: kerningBreathe 8s ease-in-out 1 forwards, pcFloat  11s ease-in-out infinite alternate; }
}


/* Keep the once-only kerning reveal, then add continuous floating */
.logo { animation: kerningBreathe 8s ease-in-out 1 forwards, pcFloat  11s ease-in-out infinite alternate; }


/* ===== Butterflies (nested elements so flap & path don't conflict) ===== */
.butterflies-layer{
  position: absolute;
  inset: 0;
  z-index: 2;        /* above fog, below content */
  pointer-events: none;
  overflow: hidden;
}
.bf-wrap{            /* follows long path */
  position: absolute;
  width: 1px; height: 1px;   /* tiny anchor point */
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  opacity: var(--o, .22);
  filter: blur(1.2px);
}
.bf-sprite{          /* butterfly body/wings; flaps subtly */
  position: absolute;
  width: var(--size, 56px);
  height: calc(var(--size, 56px) * 0.8);
  transform-origin: 50% 50%;
  filter: saturate(1.05);
}
.bf-sprite::before, .bf-sprite::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 30% 50%, var(--c, rgba(255,255,255,0.28)), rgba(255,255,255,0) 70%) left / 50% 100% no-repeat,
    radial-gradient(closest-side at 70% 50%, var(--c, rgba(255,255,255,0.28)), rgba(255,255,255,0) 70%) right / 50% 100% no-repeat;
  border-radius: 50%;
  opacity: 0.9;
}
.bf-sprite::after{
  width: 18%;
  left: 41%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.32), rgba(255,255,255,0));
  filter: blur(0.6px);
  opacity: 1;
}
@keyframes bfFlap {
  0%,100% { transform: translate(-50%,-50%) rotate(0deg) scaleY(1.00); }
  50%     { transform: translate(-50%,-50%) rotate(1.2deg) scaleY(0.94); }
}
.bf-sprite{ animation: bfFlap 2.6s ease-in-out infinite; }

/* long, seamless paths; use negative delays so they start mid-flight */
@keyframes bfPathA {
  0%   { transform: translate(-60vw,-30vh); }
  25%  { transform: translate(-20vw,-10vh); }
  50%  { transform: translate( 25vw, 10vh); }
  75%  { transform: translate( 60vw, -6vh); }
  100% { transform: translate(110vw, 22vh); }
}
@keyframes bfPathB {
  0%   { transform: translate(110vw, 10vh); }
  25%  { transform: translate( 60vw, -8vh); }
  50%  { transform: translate(  8vw, 12vh); }
  75%  { transform: translate(-32vw, -6vh); }
  100% { transform: translate(-60vw, 18vh); }
}
@keyframes bfPathC {
  0%   { transform: translate(-40vw, 28vh); }
  20%  { transform: translate( -6vw, 16vh); }
  50%  { transform: translate( 30vw,  8vh); }
  80%  { transform: translate( 72vw, 16vh); }
  100% { transform: translate(110vw, 28vh); }
}
.bfA { animation: bfPathA var(--dur, 58s) linear infinite; }
.bfB { animation: bfPathB var(--dur, 62s) linear infinite; }
.bfC { animation: bfPathC var(--dur, 54s) linear infinite; }

#countdown .number { font-size: clamp(32px, 6vw, 40px); font-weight: 500; line-height:1; }


/* === Ethereal per-letter wiggle/float for the title === */
.logo{
  white-space: nowrap;
  display: inline-block;
  will-change: transform;
  perspective: 800px; /* subtle depth for 3D-ish feel */
}
.logo .glyph{
  display: inline-block;
  will-change: transform, opacity, text-shadow;
  transform-origin: 50% 60%;
  /* keep letters crisp; shadows handled separately */
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 6px 12px rgba(0,0,0,.12);
  animation-name: glyphFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* Staggering via CSS variables set per-nth-child below */
  animation-duration: var(--dur, 7s);
  animation-delay: var(--del, 0s);
}
.logo .glyph.space { width: 0.35em; } /* preserves spacing without wiggling actual space */

@keyframes glyphFloat{
  0%   { transform: translateY(0) translateZ(0) rotateZ(0deg) skewX(0deg); opacity: 0.98; }
  50%  { transform: translateY(-2.5px) translateZ(1px) rotateZ(0.35deg) skewX(0.15deg); opacity: 1; }
  100% { transform: translateY(0.5px) translateZ(0) rotateZ(-0.25deg) skewX(-0.1deg); opacity: 0.98; }
}

/* Staggered randomization (deterministic) */
.logo .glyph:nth-child(1)  { --dur: 9.2s; --del: -.2s; }
.logo .glyph:nth-child(2)  { --dur: 10.0s; --del: -.6s; }
.logo .glyph:nth-child(3)  { --dur: 8.6s; --del: -.9s; }
.logo .glyph:nth-child(4)  { --dur: 9.8s; --del: -.4s; }
.logo .glyph:nth-child(5)  { --dur: 9.0s; --del: -.7s; }  /* space */
.logo .glyph:nth-child(6)  { --dur: 9.6s; --del: -.3s; }
.logo .glyph:nth-child(7)  { --dur: 8.8s; --del: -.8s; }
.logo .glyph:nth-child(8)  { --dur: 10.2s; --del: -.5s; }
.logo .glyph:nth-child(9)  { --dur: 9.4s; --del: -.1s; }
.logo .glyph:nth-child(10) { --dur: 8.9s; --del: -.65s; }
.logo .glyph:nth-child(11) { --dur: 9.7s; --del: -.25s; }
.logo .glyph:nth-child(12) { --dur: 10.0s; --del: -.55s; }

@media (prefers-reduced-motion: reduce){
  .logo .glyph { animation: none !important; }
}

@keyframes cloudMove {
  0% { transform: translateX(-20px); }
  100% { transform: translateX(20px); }
}
.clouds-layer, .cloud, .fog {
  animation: cloudMove 60s ease-in-out infinite alternate;
}


/* === Dynamic Parallax (Device Motion / Gyro) === */
.app-frame{ perspective: 700px; transform-style: preserve-3d; }
.parallax-enabled .layer { will-change: transform; transform-style: preserve-3d; }
/* Depth hints (lower = farther) */
.layer-bg        { transform: translateZ(-60px) scale(1.06); }
.layer-fog       { transform: translateZ(-30px) scale(1.03); }
.layer-butterfly { transform: translateZ(-15px) scale(1.02); }
.layer-content   { transform: translateZ(0px); }
.layer-title     { transform: translateZ(10px); }
.layer-clock     { transform: translateZ(8px); }

/* iOS Permission button (shows only when needed) */
.motion-permission {
  position: absolute; inset: auto 12px 12px auto;
  background: rgba(255,255,255,0.12);
  color: #fff; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px; padding: 10px 14px; font: 600 13px/1 ui-sans-serif, system-ui;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  cursor: pointer; z-index: 9; display: none;
}
.show-permission .motion-permission { display: inline-block; }

@media (prefers-reduced-motion: reduce){
  .parallax-enabled .layer{ transform: none !important; }
  .motion-permission{ display: none !important; }
}


/* === Thinner, elegant title + 'pale' italic === */
.logo{
  font-weight: 300; /* leaner weight if available */
  letter-spacing: 0.01em;
}
/* Safety: if the font ignores weight, visually slim slightly via stroke/fill balance */
@supports (-webkit-text-stroke: 0.25px white) {
  .logo {
    -webkit-text-stroke: 0.25px rgba(255,255,255,0.65);
    -webkit-text-fill-color: rgba(255,255,255,0.92);
  }
}

/* Target the first word 'pale' (first 4 glyphs before the space) */
.logo .glyph:nth-child(1),
.logo .glyph:nth-child(2),
.logo .glyph:nth-child(3),
.logo .glyph:nth-child(4){
  font-style: italic;
  transform: skewX(-6deg);
}

.logo{ animation-duration: 11s, 11s; }


html, body { height: 100%; overflow: hidden; }