/* =========================================================
   SHELL — parts that persist across pages
   Atmosphere background, header, dock (sky + music), cursors,
   transition curtain and shared components.
   ========================================================= */

/* ---------- Atmosphere (cloudy background of inner pages) ---------- */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 16, 48, 0.25) 0%, rgba(20, 22, 70, 0.1) 40%, rgba(10, 12, 40, 0.55) 100%),
    url("/assets/img/clouds.webp") center / cover no-repeat,
    linear-gradient(160deg, #2a3d8f, #5b4aa8 55%, #8a5bb0);
  transition: opacity 900ms var(--ease-out);
}

/* Slowly drifting color waves (plain opacity, no blend modes: cheap to render) */
.atmosphere-glow {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  opacity: 0.32;
  will-change: transform;
}

.atmosphere-glow.g1 {
  top: -25vmax;
  left: -18vmax;
  background: radial-gradient(circle, rgba(106, 168, 255, 0.9), transparent 62%);
  animation: glow-drift-1 40s ease-in-out infinite alternate;
}

.atmosphere-glow.g2 {
  bottom: -30vmax;
  right: -22vmax;
  background: radial-gradient(circle, rgba(200, 115, 222, 0.85), transparent 62%);
  animation: glow-drift-2 48s ease-in-out infinite alternate;
}

@keyframes glow-drift-1 {
  to { transform: translate(22vw, 16vh) scale(1.12); }
}

@keyframes glow-drift-2 {
  to { transform: translate(-20vw, -14vh) scale(1.15); }
}

body[data-page="welcome"] .atmosphere {
  opacity: 0;
}

body[data-page="welcome"] .atmosphere-glow {
  animation-play-state: paused;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  pointer-events: none;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-mid) var(--ease-out);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 44, 0.6), rgba(10, 14, 44, 0));
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}

body.is-scrolled .site-header::before {
  opacity: 1;
}

/* Hidden on the welcome page and on Mavi Sayfa (the diamonds are the menu there) */
body[data-page="welcome"] .site-header,
body[data-page="home"] .site-header,
body.header-hidden .site-header {
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden; /* its links can't be reached by keyboard either */
}

.site-header-inner {
  position: relative;
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header-inner > * {
  pointer-events: auto;
}

/* Navigation pill (centered) */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: var(--r-full);
  background: var(--glass-dark);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-m), var(--sheen);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Highlight that slides to the hovered / active link.
   Links never change width on hover, so it always covers them exactly. */
.nav-indicator {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 0;
  border-radius: var(--r-full);
  background: linear-gradient(120deg, rgba(110, 160, 255, 0.38), rgba(200, 115, 222, 0.34));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 6px 20px -6px rgba(140, 120, 255, 0.6);
  opacity: 0;
  transition:
    transform 420ms var(--ease-out),
    width 420ms var(--ease-out),
    opacity var(--t-mid) var(--ease-out);
  pointer-events: none;
}

.nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--r-full);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--t-mid) var(--ease-out);
}

/* The ♫ notes from the original site: float in on both sides on hover,
   positioned inside the padding so nothing shifts */
.nav a::before,
.nav a::after {
  content: "♫";
  position: absolute;
  top: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--sky);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}

.nav a::before {
  left: 4px;
  transform: translate(5px, -50%);
}

.nav a::after {
  right: 4px;
  transform: translate(-5px, -50%);
}

.nav a:hover::before,
.nav a:hover::after,
.nav a:focus-visible::before,
.nav a:focus-visible::after {
  opacity: 0.9;
  transform: translate(0, -50%);
}

.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"] {
  color: #fff;
}

/* "Ben Kimim": yellow on hover with question marks, like the original site */
.nav a[data-accent="yellow"]::before,
.nav a[data-accent="yellow"]::after {
  content: "?";
  font-size: 15px;
  font-weight: 800;
  color: #ffe066;
}

.nav a[data-accent="yellow"]:hover,
.nav a[data-accent="yellow"]:focus-visible {
  color: #ffe066;
  text-shadow: 0 0 14px rgba(255, 224, 102, 0.45);
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--glass-dark);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-s), var(--sheen);
}

.nav-toggle span {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast);
}

.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 23px; right: 20px; }
.nav-toggle span:nth-child(3) { top: 29px; }

body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  :root {
    --header-h: 68px;
  }

  .site-header-inner {
    justify-content: flex-end;
  }

  .nav-toggle {
    display: block;
    position: relative;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 80px 24px 40px;
    border: 0;
    border-radius: 0;
    background: rgba(12, 16, 54, 0.94);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
  }

  body.nav-open .nav {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t-mid) var(--ease-out);
  }

  .nav-indicator {
    display: none;
  }

  .nav a {
    height: auto;
    padding: 10px 34px;
    font-family: var(--font-display);
    font-size: clamp(30px, 9vw, 42px);
    font-weight: 400;
    font-style: italic;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), color var(--t-mid);
  }

  body.nav-open .nav a {
    opacity: 1;
    transform: none;
    transition-delay: calc(80ms + var(--i, 0) * 60ms);
  }

  .nav a[aria-current="page"] {
    color: #fff;
    text-shadow: 0 0 24px rgba(190, 160, 255, 0.7);
  }

  .nav a::before,
  .nav a::after {
    font-size: 16px;
  }
}

/* ---------- Corner brand: MR logo + ribbon (bottom-left) ---------- */

.corner-brand {
  position: fixed;
  left: max(var(--gutter), env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 61;
  display: block;
  width: 52px;
  height: 52px;
  outline: none;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-mid);
}

.corner-logo {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  filter: drop-shadow(0 6px 14px rgba(8, 10, 40, 0.45));
  transition: transform var(--t-slow) var(--ease-spring);
}

/* The ribbon starts behind the logo and unrolls to the right; its free end
   is cut like a swallowtail */
.corner-ribbon {
  --notch: 14px;
  position: absolute;
  z-index: 1;
  left: 26px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 3px;
  width: max-content;
  /* exactly as tall as the logo's front square (78% of the image, sitting a
     little low in it), so nothing peeks out above or below the logo */
  height: 78%;
  top: calc(50% + 6.3%);
  padding: 0 calc(var(--notch) + 18px) 0 38px;
  translate: 0 -50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%),
    linear-gradient(100deg, #2552c4 0%, #3b74e8 55%, #4f86f0 100%);
  box-shadow: inset 0 -2px 0 rgba(10, 24, 80, 0.25);
  filter: drop-shadow(0 6px 12px rgba(8, 10, 40, 0.35));
  white-space: nowrap;
  color: #fff;
  pointer-events: none;
  clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
  transition: clip-path 520ms var(--ease-out);
}

/* Thin darker stitch lines along both edges, like a satin ribbon */
.corner-ribbon::before {
  content: "";
  position: absolute;
  inset: 3px var(--notch) 3px 30px;
  border-block: 1px dashed rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.corner-ribbon-top,
.corner-ribbon-bottom {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out);
}

.corner-ribbon-top {
  font-size: 11.5px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.3px;
}

.corner-ribbon-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.15));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease-out);
}

.corner-ribbon-bottom {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.85);
}

/* Open: hover with a mouse, keyboard focus, or a tap on touch screens */
.corner-brand:hover .corner-ribbon,
.corner-brand:focus-visible .corner-ribbon,
.corner-brand.is-open .corner-ribbon {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch)) 50%, 100% 100%, 0 100%);
}

.corner-brand:hover .corner-ribbon-top,
.corner-brand:hover .corner-ribbon-bottom,
.corner-brand:focus-visible .corner-ribbon-top,
.corner-brand:focus-visible .corner-ribbon-bottom,
.corner-brand.is-open .corner-ribbon-top,
.corner-brand.is-open .corner-ribbon-bottom {
  opacity: 1;
  transform: none;
  transition-delay: 180ms;
}

.corner-brand:hover .corner-ribbon-rule,
.corner-brand:focus-visible .corner-ribbon-rule,
.corner-brand.is-open .corner-ribbon-rule {
  transform: scaleX(1);
  transition-delay: 260ms;
}

.corner-brand:hover .corner-logo,
.corner-brand:focus-visible .corner-logo,
.corner-brand.is-open .corner-logo {
  transform: rotate(-12deg) scale(1.06);
}

/* Same on every page and scroll position; only steps aside while a
   full-screen viewer (photo / poem) is open */
body.dock-hidden .corner-brand {
  transform: translateY(160%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 480px) {
  .corner-brand,
  .corner-logo {
    width: 46px;
    height: 46px;
  }

  .corner-ribbon {
    left: 23px;
    padding-left: 32px;
  }
}

/* ---------- Dock: back to the sky + music ---------- */

.dock {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  gap: 10px;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-mid);
}

body.dock-hidden .dock {
  transform: translateY(140%);
  opacity: 0;
}

.dock-btn {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-dark);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-m), var(--sheen);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform var(--t-mid) var(--ease-spring), background var(--t-mid), border-color var(--t-mid);
}

.dock-btn:hover {
  transform: translateY(-3px) scale(1.06);
  background: var(--glass-strong);
  border-color: var(--glass-border-strong);
}

.dock-btn:active {
  transform: scale(0.94);
}

/* Tooltip */
.dock-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  padding: 7px 12px;
  border-radius: var(--r-s);
  background: rgba(12, 16, 54, 0.92);
  border: 1px solid var(--glass-border);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}

.dock-btn:hover::after,
.dock-btn:focus-visible::after {
  opacity: 1;
  transform: none;
}

/* Language button: TR / EN, the active language lit */
.dock-lang {
  width: auto;
  padding: 0 7px;
  gap: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-full);
}

.lang-code {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--text-3);
  transition: color var(--t-mid), background var(--t-mid), box-shadow var(--t-mid);
}

.dock-lang[data-lang="tr"] .lang-code[data-code="tr"],
.dock-lang[data-lang="en"] .lang-code[data-code="en"] {
  color: #fff;
  background: linear-gradient(120deg, rgba(110, 160, 255, 0.5), rgba(200, 115, 222, 0.45));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

.dock-lang:hover .lang-code {
  color: var(--text-2);
}

/* Sky button (the sun-and-cloud icon from the original site) */
.dock-sky svg {
  width: 30px;
  height: 30px;
  overflow: visible;
}

.dock-sky .sun-core {
  fill: #ffc94b;
  stroke: #e69a2a;
  stroke-width: 1.1;
}

.dock-sky .sun-rays {
  fill: none;
  stroke: #ffcf66;
  stroke-width: 1.4;
  stroke-linecap: round;
  transform-origin: 16px 13px;
  transition: transform 1.2s var(--ease-out);
}

.dock-sky:hover .sun-rays {
  transform: rotate(90deg);
}

.dock-sky .cloud {
  fill: #fff;
  stroke: #9ab8d8;
  stroke-width: 1;
  stroke-linejoin: round;
  transition: transform var(--t-slow) var(--ease-out);
}

.dock-sky:hover .cloud.c1 { transform: translateX(-1.5px); }
.dock-sky:hover .cloud.c2 { transform: translateX(1.5px); }

body[data-page="welcome"] .dock-sky {
  display: none;
}

/* Music button: dancing equalizer bars while playing */
.music-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.music-bars i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff, var(--sky));
  transform-origin: bottom;
  transform: scaleY(0.22);
  transition: transform var(--t-mid) var(--ease-out);
}

.dock-music.is-playing .music-bars i {
  animation: bar 1s ease-in-out infinite alternate;
}

.dock-music.is-playing .music-bars i:nth-child(2) { animation-duration: 0.8s; animation-delay: -0.4s; }
.dock-music.is-playing .music-bars i:nth-child(3) { animation-duration: 1.15s; animation-delay: -0.2s; }
.dock-music.is-playing .music-bars i:nth-child(4) { animation-duration: 0.9s; animation-delay: -0.6s; }

@keyframes bar {
  0% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.45); }
}

.music-note {
  display: none;
  width: 25px;
  height: 25px;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* Off: the bars give way to a music note with a red slash */
.dock-music.is-off .music-bars {
  display: none;
}

.dock-music.is-off .music-note {
  display: block;
}

.dock-music .music-slash {
  position: absolute;
  width: 28px;
  height: 1.5px;
  border-radius: 2px;
  background: #ff8597;
  box-shadow: 0 0 0 0.75px rgba(12, 16, 54, 0.45);
  transform: rotate(-45deg) scaleX(0);
  transition: transform var(--t-mid) var(--ease-spring);
}

.dock-music.is-off .music-slash {
  transform: rotate(-45deg) scaleX(1);
}

.dock-music.is-waiting::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--sky);
  animation: pulse 2.2s var(--ease-out) infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Narrow screens: a slightly smaller dock */
@media (max-width: 720px) {
  .dock {
    gap: 7px;
  }

  .dock-btn {
    width: 42px;
    height: 42px;
  }

  .dock-lang {
    width: auto;
    padding: 0 5px;
  }

  .lang-code {
    width: 26px;
    height: 26px;
    font-size: 10.5px;
  }
}

/* Phones: a little smaller still */
@media (max-width: 480px) {
  .dock {
    gap: 6px;
  }

  .dock-btn {
    width: 40px;
    height: 40px;
  }

  .dock-lang {
    width: auto;
    padding: 0 4px;
  }

  .lang-code {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
}

/* ---------- Page container ---------- */

#page {
  position: relative;
  min-height: 100svh;
}

body[data-fullscreen] #page {
  height: 100svh;
  overflow: hidden;
}

#page.is-leaving {
  animation: page-leave 300ms var(--ease-out) both;
}

#page.is-entering {
  animation: page-enter 620ms var(--ease-out) both;
}

@keyframes page-leave {
  to {
    opacity: 0;
    transform: translateY(-14px) scale(0.985);
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(22px) scale(1.01);
  }
}

/* ---------- Cloud curtain (welcome ↔ inner page transition) ---------- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

.curtain.is-active {
  visibility: visible;
  pointer-events: auto;
}

.curtain-body {
  position: absolute;
  left: -20vw;
  right: -20vw;
  top: -10vh;
  height: 140vh;
  will-change: transform;
}

.curtain-base {
  position: absolute;
  inset: 16vh 0 16vh;
  background: linear-gradient(180deg, #ddd6ff 0%, #a99be6 45%, #7666bf 100%);
}

.curtain-puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, #f1ecff 38%, rgba(225, 216, 255, 0.85) 58%, rgba(210, 198, 255, 0) 72%);
}

.curtain-puff.is-low {
  background: radial-gradient(circle at 50% 55%, #8a79cf 0%, #7d6cc6 45%, rgba(118, 102, 191, 0.85) 58%, rgba(118, 102, 191, 0) 72%);
}

/* ---------- Cotton-candy cloud puff (Mavi Sayfa diamonds → page) ---------- */

.puff-layer {
  position: fixed;
  inset: 0;
  z-index: 58;
  overflow: hidden;
  pointer-events: none;
}

.puff-veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at var(--ox) var(--oy), #fff1f8 0%, #ffd6ea 30%, #ecd6ff 62%, #d3e9ff 100%);
}

.puff-cloud,
.puff-speck {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

.puff-cloud {
  background: radial-gradient(closest-side, rgba(var(--c), 0.98), rgba(var(--c), 0.82) 45%, rgba(var(--c), 0) 100%);
}

.puff-speck {
  background: rgb(var(--c));
  box-shadow: 0 0 6px rgba(var(--c), 0.95), 0 0 2px #fff;
}

/* ---------- Cursors ---------- */

body.custom-cursor,
body.custom-cursor a,
body.custom-cursor button,
body.custom-cursor label,
body.custom-cursor [role="button"] {
  cursor: none;
}

body.custom-cursor input,
body.custom-cursor textarea,
body.custom-cursor select {
  cursor: text;
}

/* Bird (welcome page): a chubby little blue bird */
.bird-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 72px;
  height: 54px;
  margin: -26.4px 0 0 -9.6px; /* beak tip (8.5, 23.5 in the 64×48 drawing) sits on the pointer */
  pointer-events: none;
  opacity: 0;
  transform-origin: 9.6px 26.4px;
  will-change: transform;
  transition: opacity 300ms;
}

.bird-cursor.is-visible {
  opacity: 1;
}

.bird-cursor svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bird-cursor .body { fill: url(#bird-body); }
.bird-cursor .tail { fill: #2453c4; }
.bird-cursor .belly { fill: #fdfaf3; }
.bird-cursor .beak { fill: #ffb347; }
.bird-cursor .eye { fill: #1b1f3b; }
.bird-cursor .eye-shine { fill: #fff; }
.bird-cursor .cheek { fill: #ff9fb8; opacity: 0.8; }
.bird-cursor .tuft { fill: none; stroke: #3f7ff0; stroke-width: 1.8; stroke-linecap: round; }

.bird-cursor .wing {
  transform-box: fill-box;
  transform-origin: 15% 100%;
}

.bird-cursor .wing.front {
  fill: #2453c4;
  animation: wing-front var(--flap, 0.42s) ease-in-out infinite;
}

.bird-cursor .wing.back {
  fill: #9cc2ff;
  animation: wing-back var(--flap, 0.42s) ease-in-out infinite;
}

/* Resting: wings tucked, the bird gently bobs */
.bird-cursor.is-gliding .wing {
  animation-duration: 2.6s;
}

.bird-cursor.is-gliding svg {
  animation: bird-bob 2.6s ease-in-out infinite;
}

@keyframes wing-front {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(-0.6) rotate(8deg); }
}

@keyframes wing-back {
  0%, 100% { transform: scaleY(0.9) rotate(-6deg); }
  50% { transform: scaleY(-0.45) rotate(6deg); }
}

@keyframes bird-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Paintbrush (inner pages) */
.brush-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 120px;
  height: 120px;
  margin: -117px 0 0 -3px; /* bristle tip sits on the pointer */
  pointer-events: none;
  opacity: 0;
  transform-origin: 3px 117px;
  will-change: transform;
  transition: opacity 250ms;
}

.brush-cursor.is-visible {
  opacity: 1;
}

.brush-cursor svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.paint-canvas {
  position: fixed;
  inset: 0;
  z-index: 199;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Shared components ---------- */

.container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  /* bottom space keeps content clear of the fixed corner brand and dock */
  padding: calc(var(--header-h) + clamp(24px, 6vh, 64px)) var(--gutter) calc(clamp(40px, 8vh, 80px) + 64px);
}

.page-head {
  text-align: center;
  margin-bottom: clamp(32px, 6vh, 56px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--sky);
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.page-head h1 {
  margin-top: 10px;
  padding-bottom: 0.08em;
  font-size: clamp(44px, 8vw, 84px);
  font-weight: 400;
  letter-spacing: -1.5px;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-head p {
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--text-2);
}

.glass-card {
  position: relative;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-m), var(--sheen);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Buttons */
.btn {
  --btn-bg: var(--grad-brand);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  background-size: 160% 100%;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 30px -10px rgba(120, 100, 240, 0.7), var(--sheen);
  transition: transform var(--t-mid) var(--ease-spring), box-shadow var(--t-mid), background-position 800ms var(--ease-out);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 18px 40px -12px rgba(150, 110, 240, 0.85), var(--sheen);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn:active {
  transform: translateY(0) scale(0.97);
}

.btn:disabled {
  opacity: 0.7;
  pointer-events: none;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-ghost {
  --btn-bg: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-s), var(--sheen);
}

.btn-ghost:hover {
  --btn-bg: var(--glass-strong);
  box-shadow: var(--shadow-m), var(--sheen);
}

.icon-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  transition: transform var(--t-mid) var(--ease-spring), background var(--t-mid);
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

/* Elements revealed on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--delay, 0) * 1ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Opacity-only variant for cards that shouldn't move */
[data-reveal="fade"] {
  transform: none;
  transition-property: opacity;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  z-index: 120;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: var(--r-full);
  background: rgba(12, 16, 54, 0.94);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-m);
  font-size: 14px;
  font-weight: 600;
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: transform var(--t-mid) var(--ease-spring), opacity var(--t-mid);
  pointer-events: none;
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* =========================================================
   PAGE HEROES (shared base) — each page adds its own scene
   ========================================================= */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(64vh, 640px);
  margin: calc(-1 * clamp(10px, 3vh, 40px)) 0 clamp(24px, 5vh, 48px);
  padding: 10px 0 70px;
  text-align: center;
  isolation: isolate;
}

.hero-title {
  position: relative;
  padding: 0.12em 0.18em 0.02em;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(76px, 13vw, 160px);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 4px 30px rgba(120, 100, 255, 0.45), 0 0 80px rgba(255, 255, 255, 0.22);
}

.hero-sub {
  position: relative;
  margin-top: 2px;
  min-height: 1.6em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  color: var(--text-2);
}

/* "Coming soon" badge */
.soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sky);
}

.soon-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
  50% { opacity: 0.3; }
}

/* Anchor targets stop below the fixed header */
#page [id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}