/* =========================================================================
   DER GRIZZLY - Uebergangsseite
   Aufbau: @layer basis -> layout -> teile -> zustaende
   Skalierung: --s ist 1 % der Entwurfsbreite (1920 px). Alle Groessen sind
   Vielfache davon, dadurch bleiben die Proportionen des Entwurfs in jedem
   Fenster erhalten.
   ========================================================================= */

@layer basis, schrift, layout, teile, zustaende;

/* ---------- Roboto Condensed, hier im Ordner, nicht bei Google ----------
   Eine einzige Variable-Font-Datei je Zeichensatz deckt Light bis Bold ab.
   Apache License 2.0. Es geht kein Request nach draussen.               */
@layer schrift {

  @font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-condensed-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
  }

  @font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-condensed-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
}

/* ---------- Farben, Schrift, Grundeinstellungen ---------- */
@layer basis {

  :root {
    /* Markenfarben, aus dem Entwurf und der Baeren-Illustration gemessen */
    --rot: #ff1d15;
    --rot-dunkel: #ed2326;
    --schwarz: #0d0303;
    --creme: #f2ebe0;
    --weiss: #fff;

    /* Die Schrift des Entwurfs. Arial Narrow als Notnagel, falls die
       woff2-Datei einmal nicht ankommt - aehnliche Laufweite. */
    --schrift: "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed",
               Arial, system-ui, sans-serif;

    /* Skalierungsbasis: nimmt die kleinere der beiden Fensterachsen als Mass,
       damit nichts aus dem Bild laeuft, wenn das Fenster flacher wird. */
    --s: min(1vw, 1.7778svh);

    /* Baerenlage, aus dem Entwurf zurueckgerechnet: eine Einheit der
       Illustration entspricht dort 1,586 px. Die Hoehe richtet sich nach
       der kleineren Fensterachse, damit der Baer in schmalen Fenstern
       nicht ueber den Text waechst. Der Anschnitt rechts haengt an seiner
       Groesse - dadurch bleibt der Bildausschnitt in jedem Format gleich. */
    --baer-hoehe: min(215svh, 121vw);
    --baer-oben: 3.4svh;
    --baer-rechts: calc(-0.15 * var(--baer-hoehe));

    --rand-x: 4.53vw;
    --rand-y: 5.83svh;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100svh;
    background: var(--rot);
    color: var(--weiss);
    font-family: var(--schrift);
    font-weight: 400;
    line-height: 1.25;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a { color: inherit; }

  /* Nur fuer Screenreader */
  .nur-vorlesen {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Sprungmarke fuer Tastaturnutzung */
  .sprung {
    position: absolute;
    top: 0; left: 0;
    z-index: 50;
    padding: 0.75rem 1.25rem;
    background: var(--schwarz);
    color: var(--weiss);
    font-size: 1rem;
    text-decoration: none;
    translate: 0 -120%;
  }
  .sprung:focus-visible { translate: 0 0; }

  :focus-visible {
    outline: 3px solid var(--weiss);
    outline-offset: 4px;
  }
}

/* ---------- Buehne: Inhalt oben links, Baer rechts ---------- */
@layer layout {

  .buehne {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
  }

  .inhalt {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--rand-y);
    inset-inline-start: var(--rand-x);
    width: min(48vw, 100% - var(--rand-x) * 2);
  }

  .baer-buehne {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
  }

  .baer {
    position: absolute;
    inset-block-start: var(--baer-oben);
    inset-inline-end: var(--baer-rechts);
    height: var(--baer-hoehe);
    width: auto;
    display: block;
  }

  .fuss {
    position: absolute;
    z-index: 3;
    inset-block-end: max(1.3svh, 0.6rem);
    inset-inline-end: max(0.83vw, 0.6rem);
    display: flex;
    gap: 1.6em;
  }
}

/* ---------- Logo, Claim, Kontakt, Fusszeile ---------- */
@layer teile {

  .logo {
    margin: 0;
    width: 100%;
    max-width: calc(42.14 * var(--s));
  }

  .logo-svg {
    display: block;
    width: 100%;
    height: auto;
    fill: var(--schwarz);
  }

  /* Schriftgrad, Laufweite und Zeilenhoehen sind aus dem Entwurf
     zurueckgerechnet, damit die Versalhoehen exakt dort sitzen - daher
     die krummen Werte. */
  .claim {
    margin: calc(4.948 * var(--s)) 0 0;
    font-size: calc(3.807 * var(--s));
    text-transform: uppercase;
    letter-spacing: 0.031em;
  }

  .claim-oben {
    display: block;
    font-weight: 300;
    line-height: 0.985;
  }

  /* Das durchschaltende Wort. Jeder Buchstabe sitzt in einem eigenen <i>,
     das um seine waagerechte Achse kippt - wie die Blaetter einer
     Flughafen-Anzeigetafel. Das <em> darin steht ein Stueck vor der
     Drehachse, dadurch bekommt die Drehung Tiefe. */
  .walze {
    display: block;
    position: relative;
    height: 0.985em;
    font-weight: 700;
    perspective: 5em;
  }

  .walze-wort {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    line-height: 0.985em;
    white-space: nowrap;
  }

  .walze-wort i {
    display: inline-block;
    font-style: normal;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: translateZ(-0.33em) rotateX(90deg);
    opacity: 0;
  }

  .walze-wort em {
    display: inline-block;
    font-style: normal;
    backface-visibility: hidden;
    transform: translateZ(0.33em);
  }

  /* steht einfach da, ohne Animation - der Zustand beim Laden */
  .walze-wort i.da {
    opacity: 1;
    transform: translateZ(-0.33em) rotateX(0deg);
  }

  .walze-wort i.rein { animation: buchstabe-rein 0.4s ease forwards; }
  .walze-wort i.raus { animation: buchstabe-raus 0.4s ease forwards; }

  @keyframes buchstabe-rein {
    0%   { opacity: 0; transform: translateZ(-0.33em) rotateX(90deg); }
    60%  { opacity: 1; transform: translateZ(-0.33em) rotateX(-10deg); }
    100% { opacity: 1; transform: translateZ(-0.33em) rotateX(0deg); }
  }

  @keyframes buchstabe-raus {
    0%   { opacity: 1; transform: translateZ(-0.33em) rotateX(0deg); }
    60%  { opacity: 0; transform: translateZ(-0.33em) rotateX(-100deg); }
    100% { opacity: 0; transform: translateZ(-0.33em) rotateX(-90deg); }
  }

  .kontakt {
    margin: calc(5.16 * var(--s)) 0 0;
    color: var(--schwarz);
    font-size: calc(1.48 * var(--s));
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
  }

  .kontakt a {
    text-decoration: none;
    padding-block-end: 0.2em;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.35s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .kontakt a:hover,
  .kontakt a:focus-visible { background-size: 100% 1px; }

  .fuss-link {
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0.4em 0.1em;
    background: none;
    color: var(--weiss);
    font: inherit;
    text-decoration: none;
    font-size: clamp(0.625rem, calc(0.66 * var(--s)), 0.8125rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.25s;
  }
  .fuss-link:hover,
  .fuss-link:focus-visible { opacity: 1; }
}

/* ---------- Impressum- und Datenschutz-Overlay ----------
   Vollflaechig dasselbe Rot wie die Seite, leicht durchscheinend, damit der
   Baer noch als Schatten zu ahnen ist. Text linksbuendig auf der Linie des
   Logos. Ein Tipp irgendwo schliesst (siehe js/app.js), das X sowieso. */
@layer teile {

  .layer {
    /* 0.98 = 98 % deckend. Kleiner = mehr Baer scheint durch. */
    --layer-deckung: 0.98;

    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(255 29 21 / var(--layer-deckung));
    color: var(--schwarz);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    cursor: pointer;
  }

  .layer::backdrop { background: transparent; }

  /* Ohne JavaScript greift der Anker (#impressum): Impressum und
     Datenschutz muessen immer erreichbar sein. Mit JavaScript uebernimmt
     das echte Dialogfenster. */
  .layer:target { display: block; z-index: 100; }

  .layer-inhalt {
    max-width: 46rem;
    padding: max(var(--rand-y), env(safe-area-inset-top))
             max(var(--rand-x), 1.25rem)
             calc(var(--rand-y) + env(safe-area-inset-bottom))
             max(var(--rand-x), env(safe-area-inset-left));
    padding-inline-end: max(var(--rand-x), 1.25rem);
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.0625rem);
    line-height: 1.55;
    text-align: left;
    cursor: auto;
  }

  /* Das X steht fest in der Ecke oben rechts und scrollt nicht mit. Die
     Tippflaeche ist 44 px gross, das Kreuz sitzt mittig darin. --scrollbar
     setzt das Skript auf die Breite der Bildlaufleiste, damit das X nicht
     darueber liegt. Der rote Grund verdeckt Text, der darunter durchlaeuft. */
  .layer-x {
    position: fixed;
    top: max(0.25rem, env(safe-area-inset-top));
    right: calc(0.25rem + var(--scrollbar, 0px) + env(safe-area-inset-right));
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--rot);
    color: var(--schwarz);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
  }
  .layer-x:hover, .layer-x:focus-visible { color: var(--weiss); }

  .layer h2 {
    margin: 0 0 1.2em;
    color: var(--weiss);
    font-size: clamp(1.2rem, 5.6vw, 3.2rem);
    hyphens: manual;
    overflow-wrap: normal;
    font-weight: 700;
    letter-spacing: 0.031em;
    line-height: 1;
    text-transform: uppercase;
  }

  .layer h3 {
    margin: 2.2em 0 0.6em;
    color: var(--weiss);
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .layer h4 {
    margin: 1.6em 0 0.4em;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
  }

  .layer p, .layer ul { margin: 0 0 1em; }
  .layer ul { padding-inline-start: 1.25em; }
  .layer li { margin-bottom: 0.4em; }

  .layer a:not(.layer-x) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }
  .layer a:not(.layer-x):hover { color: var(--weiss); }
}

/* ---------- Augen, Blinzeln, Zustaende ---------- */
@layer zustaende {

  /* Solange die Illustration noch als Bild dasteht, liegt sie an derselben
     Stelle wie das spaetere Inline-SVG - dadurch kein Sprung beim Austausch. */
  .baer-buehne > svg {
    position: absolute;
    inset-block-start: var(--baer-oben);
    inset-inline-end: var(--baer-rechts);
    height: var(--baer-hoehe);
    width: auto;
    display: block;
  }

  /* Die Pupillen werden per JS ueber --pupille-x/--pupille-y gesteuert.
     Die Uebergangszeit macht aus Spruengen ein weiches Nachziehen. */
  #pupille-l, #pupille-r {
    transform: translate(var(--pupille-x, 0px), var(--pupille-y, 0px));
    transition: transform 0.14s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Klick auf den Baeren: Augen reissen auf, kurzes Zucken */
  .erschrocken #pupille-l,
  .erschrocken #pupille-r {
    transform: translate(var(--pupille-x, 0px), var(--pupille-y, 0px)) scale(0.62);
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: transform 0.09s ease-out;
  }

  .zuckt { animation: zucken 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

  @keyframes zucken {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    15%  { translate: calc(-0.35 * var(--s)) calc(-0.25 * var(--s)); rotate: -0.35deg; }
    40%  { translate: calc(0.25 * var(--s)) calc(0.1 * var(--s));    rotate: 0.25deg; }
    70%  { translate: calc(-0.12 * var(--s)) 0;                      rotate: -0.1deg; }
  }
}

/* ---------- Hochformat: Text oben, Baerenkopf unten ----------
   Hier gibt die Breite das Mass vor. Der Baer wird so weit nach unten
   geschoben, dass der Koerper aus dem Bild laeuft und nur der Kopf steht -
   ausgerichtet an seiner Unterkante, die bei 35,5 % seiner Hoehe liegt. */
@media (max-aspect-ratio: 9 / 10) {
  :root {
    /* Beide Masse haengen an der kleineren Achse, damit Text und Baer vom
       schmalen Handy bis zum Tablet hochkant zueinander passen und sich
       nirgends ins Gehege kommen. */
    --s: min(2.05vw, 1.15svh);
    --baer-hoehe: min(230vw, 112svh);
    --baer-oben: auto;
    /* Kopfunterkante liegt bei 35,5 % der Baerenhoehe - daran wird
       ausgerichtet, der Rest des Koerpers laeuft unten aus dem Bild. */
    --baer-unten: calc(4.9svh - 0.645 * var(--baer-hoehe));
    /* setzt die Kopfmitte auf rund 70 % der Fensterbreite, dadurch bleibt
       der Baer auch hochkant rechts angeschnitten */
    --baer-rechts: calc(30vw - 0.327 * var(--baer-hoehe));
    --rand-x: 6.5vw;
    --rand-y: 6svh;
  }

  .inhalt { width: min(88vw, 100% - var(--rand-x)); }

  .baer,
  .baer-buehne > svg {
    inset-block-start: auto;
    inset-block-end: var(--baer-unten);
  }

  /* Kleinschrift darf auf dem Handy nicht unter die Lesbarkeitsgrenze */
  .kontakt { font-size: max(0.75rem, calc(1.48 * var(--s))); }

  .fuss { inset-inline-start: var(--rand-x); inset-inline-end: auto; }
}

/* ---------- Sehr flache Fenster: Baer bleibt an die Hoehe gebunden ---------- */
@media (min-aspect-ratio: 2 / 1) {
  :root {
    --baer-hoehe: 190svh;
    --rand-y: 9svh;
  }
}

/* ---------- Wer weniger Bewegung will, bekommt weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  #pupille-l, #pupille-r { transform: none; }

  /* Buchstaben stehen still statt zu kippen */
  .walze-wort i,
  .walze-wort i.da,
  .walze-wort i.rein {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .walze-wort i.raus { opacity: 0; animation: none; }
  .walze-wort em { transform: none; }
}