/* /duckNevi – Profil. Baut auf tokens.css + ducks.css auf; hier nur Gate, Video-Ebene und Layout. */
@layer pages {
  /* Video-Ebene (z-bg). Vor dem Betreten: Poster, weich. Läuft das Video: scharf. */
  .bg{position:fixed;inset:0;z-index:var(--z-bg);overflow:hidden;background:var(--bg)}
  .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);filter:brightness(.6) saturate(1.1) blur(8px);transition:filter 1.4s var(--ease-surface)}
  body.started .bg video{filter:brightness(.4) saturate(1.1) blur(4px)}
  body.started.video-on .bg video{filter:brightness(.42) saturate(1.1) blur(1px)}
  .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 45%,transparent 20%,color-mix(in srgb,var(--bg) 75%,transparent) 100%),linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--bg) 80%,transparent))}

  /* Gate: blockiert nur für die Autoplay-Regel der Browser, schützt nichts. */
  .gate{position:fixed;inset:0;z-index:var(--z-gate);display:grid;place-items:center;width:100%;height:100%;border:0;color:var(--text);font:inherit;text-align:center;cursor:pointer;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);transition:opacity 600ms var(--ease-surface),visibility 600ms}
  body.started .gate{opacity:0;visibility:hidden;pointer-events:none}
  .gate__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);user-select:none;transition:transform var(--dur-slow) var(--ease-surface)}
  .gate:hover .gate__inner{transform:translateY(-4px)}
  .gate__duck{position:relative;display:grid;place-items:center}
  .gate__inner img{width:64px;animation:bob var(--dur-ambient) ease-in-out infinite}
  /* Zwei Wellenringe unter der Ente, sie laufen beim Zeigen auf das Gate aus (1 : .36). */
  .gate__rings{position:absolute;left:50%;bottom:-10px;width:120px;aspect-ratio:1/.36;transform:translateX(-50%);pointer-events:none}
  .gate__rings::before,.gate__rings::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--reed-400);opacity:0;transform:scale(.4);transition:transform var(--dur-enter) var(--ease-surface),opacity var(--dur-enter) var(--ease-surface)}
  .gate__rings::after{inset:-30%;transition-delay:80ms}
  .gate:hover .gate__rings::before,.gate:focus-visible .gate__rings::before,.gate:hover .gate__rings::after,.gate:focus-visible .gate__rings::after{opacity:.45;transform:none}
  .gate:focus-visible{outline:none}
  .gate:focus-visible .gate__label{outline:2px solid var(--focus);outline-offset:6px;border-radius:var(--radius-xs)}
  .gate__label{font:var(--text-label);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--text)}
  .gate__line{width:72px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:breathe 2.4s ease-in-out infinite}
  .gate__note{font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint)}

  .topbar{position:fixed;inset:0 0 auto;z-index:var(--z-hud);padding:max(var(--space-4),env(safe-area-inset-top,0px)) var(--gutter) 0;display:flex;pointer-events:none}
  .topbar>*{pointer-events:auto}
  .topbar{justify-content:space-between;gap:var(--space-3)}
  .topbar__link{display:inline-flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4);font:var(--text-data);white-space:nowrap}
  @media (pointer:coarse){.topbar .brand--chip{height:44px}}
  .profile__eyebrow{margin-bottom:var(--space-5)}
  @media (max-width:900px) and (orientation:portrait),(max-width:639px){.profile__eyebrow{justify-content:center}}

  /* Layout: Name und Links links, Discord rechts; unter 900 px gestapelt und zentriert. */
  .profile{min-height:100svh;display:grid;align-items:center;padding-block:var(--space-24) var(--space-32)}
  .profile__name{background:linear-gradient(180deg,var(--ink-50) 35%,color-mix(in srgb,var(--ink-50) 62%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--ink-50) 12%,transparent))}
  .profile__name:focus{outline:none}
  .profile__name{transition:letter-spacing var(--dur-enter) var(--ease-surface)} /* Fokusziel nach dem Betreten, nicht interaktiv */
  .profile__path{margin-top:var(--space-5);display:inline-block;max-width:100%;font:var(--text-data);font-size:14px;font-weight:600;color:var(--accent);overflow-wrap:anywhere}
  .profile__path::after{content:"_";animation:blink 1.1s steps(1) infinite}
  .profile__links{margin-top:var(--space-8);--cluster:var(--space-3)}
  .js .enter{opacity:0;transform:translateY(var(--space-4));transition:opacity 900ms var(--ease-surface),transform 900ms var(--ease-surface);transition-delay:var(--delay,0s)}
  body.started .enter{opacity:1;transform:none}

  /* HUD: Aufrufe links, Video + Ton rechts */
  .hud{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-hud);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-3);padding:0 max(var(--space-4),env(safe-area-inset-right,0px)) max(var(--space-4),env(safe-area-inset-bottom,0px)) max(var(--space-4),env(safe-area-inset-left,0px));pointer-events:none}
  .hud>*{pointer-events:auto}
  .hud .video-btn .ic-pause{display:none}
  .hud .video-btn.is-playing .ic-pause{display:block}
  .hud .video-btn.is-playing .ic-play{display:none}
  .volume{display:flex;align-items:center;gap:var(--space-2);width:0;opacity:0;overflow:hidden;transition:width var(--dur-slow) var(--ease-surface),opacity var(--dur-base)}
  .audio:hover .volume,.audio:focus-within .volume{width:150px;opacity:1;padding-left:var(--space-3)}
  @media (hover:none){.volume{width:128px;opacity:1;padding-left:var(--space-3)}}
  .volume output{width:38px;font:var(--text-caption);font-family:var(--font-mono);color:var(--text-muted);font-variant-numeric:tabular-nums}
  .mute .ic-off{display:none}.mute.is-muted .ic-on{display:none}.mute.is-muted .ic-off{display:block}
  @media (max-width:520px){.video-btn .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

  /* Handy: die Bedienleiste wird eine einzige volle Zeile (Aufrufe | Video | Lautstärke | Ton). */
  @media (max-width:520px){
    .hud{gap:var(--space-2)}
    .hud>.cluster{flex:1;flex-wrap:nowrap;--cluster:var(--space-2);min-width:0}
    .hud .audio{flex:1;min-width:0}
    .hud .volume,.hud .audio:hover .volume,.hud .audio:focus-within .volume{flex:1;width:auto;min-width:0;opacity:1;padding-left:var(--space-3)}
    .hud .control-bar__value{padding-inline:var(--space-2)}
  }
  @media (max-width:360px){.volume output{display:none}}
  /* Querformat auf dem Handy/Tablet: Name und Discord nebeneinander statt gestapelt, kleinerer Name. */
  @media (orientation:landscape) and (min-width:640px) and (max-width:900px){
    .profile .grid>.span-7{grid-column:span 7}
    .profile .grid>.span-5{grid-column:span 5}
  }
  @media (orientation:landscape) and (max-height:560px){
    .profile{align-items:start;padding-block:calc(var(--space-18) + env(safe-area-inset-top,0px)) var(--space-24)}
    .profile__name{font-size:clamp(56px,20vh,112px)}
    .profile__links{margin-top:var(--space-5)}
    .profile__eyebrow{margin-bottom:var(--space-3)}
  }
  @media (max-width:900px) and (orientation:portrait),(max-width:639px){
    .profile{align-items:start;padding-top:var(--space-24)}
    .profile__intro{text-align:center}
    .profile__links{justify-content:center}
  }
  @media (prefers-reduced-motion:reduce){.js .enter{opacity:1;transform:none}}
}
@keyframes blink{50%{opacity:0}}