/* ═══════════════════════════════════════════════════════════════════════════
   kaos.css — VARIANT 2: "Kollaaž-kaos Aero nahaga"
   midifreak.online'i absoluutne positsioneerimine ja z-index-kihid,
   aga iga tahvel on läikiv Aero klaas. Laual laiali laotatud, mitte reas.
   Kitsal ekraanil variseb ohutult ühte veergu kokku.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer komponendid {

  .kaos {
    position: relative;
    inline-size: min(1400px, 100% - 1.5rem);
    margin-inline: auto;
    padding-block: 1.5rem 0;
  }

  /* --- laiali laotatud tahvlid ---------------------------------------- */
  .kaos__tahvel {
    padding: 1rem 1.1rem;
    background: var(--klaas);
    border: 1px solid var(--klaas-serv);
    border-radius: var(--raadius);
    box-shadow: var(--vari-3), inset 0 1px 0 rgb(255 255 255 / .8);
    backdrop-filter: blur(14px) saturate(1.5);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .kaos__tahvel { background: var(--klaas-tug); }
  }
  .kaos__tahvel > h2, .kaos__tahvel > h3 { margin-block-end: .5rem; }

  /* värvitriip tahvli ülaservas, et need eristuksid */
  .polaroid.kaos__tahvel::before { display: none; }

  .kaos__tahvel::before {
    content: "";
    display: block;
    block-size: .38rem;
    margin: -1rem -1.1rem .75rem;
    border-radius: var(--raadius) var(--raadius) 0 0;
    background: linear-gradient(to right in oklab,
                 var(--triip, var(--aktsent)),
                 color-mix(in oklab, var(--triip, var(--aktsent)), white 55%));
  }

  /* --- suur kollaažrežiim (ainult laial ekraanil) --------------------- */
  @media (width >= 72rem) {
    .kaos { min-block-size: var(--korgus, 2900px); }
    .kaos__tahvel {
      position: absolute;
      inset-block-start: var(--y, 0);
      inset-inline-start: var(--x, 0);
      /* ei lase tahvlil kunagi paremast servast välja joosta */
      inline-size: min(var(--w, 20rem), calc(100% - var(--x, 0%) - 1rem));
      rotate: var(--r, 0deg);
      z-index: var(--z, 1);
      animation: hoiju var(--kestus, 9s) ease-in-out var(--viide, 0s) infinite alternate;
      --animation-reduced: none;
    }
    .kaos__tahvel:hover, .kaos__tahvel:focus-within {
      z-index: 30;
      rotate: 0deg;
      animation-play-state: paused;
      box-shadow: var(--vari-3), 0 0 0 2px color-mix(in oklab, var(--aktsent), transparent 45%);
    }
  }
  @keyframes hoiju {
    from { translate: 0 -5px; }
    to   { translate: 0 6px; }
  }

  /* kitsal ekraanil lihtsalt virn — loetav ja kerimiskindel */
  @media (width < 72rem) {
    .kaos { display: grid; gap: 1rem; }
    .kaos__tahvel { inline-size: auto; }
  }

  /* --- suur logo ------------------------------------------------------ */
  .kaos__logo {
    position: relative;
    z-index: 20;
    text-align: center;
    margin-block-end: 1rem;
  }
  .kaos__logo h1 {
    font-size: clamp(2.4rem, 1rem + 7vw, 5.5rem);
    letter-spacing: -.03em;
    line-height: .95;
    color: light-dark(#f8fdff, #f8fdff);
    text-shadow:
      0 1px 0 rgb(255 255 255 / .6),
      0 3px 0 color-mix(in oklab, var(--aktsent), black 35%),
      0 10px 26px rgb(3 40 60 / .45);
    background: linear-gradient(to bottom in oklab, #ffffff 18%, var(--aur-1) 52%, var(--aktsent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 0 rgb(255 255 255 / .35));
  }
  .kaos__logo p {
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: clamp(.7rem, .6rem + .4vw, .9rem);
    color: light-dark(#0a4a6b, #cdeeff);
    text-shadow: 0 1px 0 rgb(255 255 255 / .55);
  }

  /* --- jooksev tekstiriba (marquee ilma <marquee>ta) ------------------ */
  .jooksja {
    position: relative;
    z-index: 20;
    display: flex;
    overflow: clip;
    gap: 2rem;
    padding: .35rem 0;
    margin-block: .8rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: light-dark(#06405e, #d8f3ff);
    background: var(--gloss), light-dark(rgb(255 255 255 / .55), rgb(8 40 58 / .55));
    border-block: 1px solid var(--klaas-serv);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  }
  .jooksja > span {
    flex: none;
    white-space: nowrap;
    padding-inline-end: 2rem;
    animation: joose 34s linear infinite;
    --animation-reduced: joose 140s linear infinite;
  }
  @keyframes joose { to { translate: -100% 0; } }

  /* --- läikiv "ehitusel" märk ----------------------------------------- */
  .ehitusel {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #3a2600;
    border: 1px solid #b98500;
    border-radius: .4rem;
    background:
      var(--gloss),
      repeating-linear-gradient(-45deg, #ffd451 0 8px, #f0a800 0 16px);
    background-blend-mode: soft-light, normal;
    box-shadow: var(--vari-1);
  }

  /* --- sädelev vinjett kaardi nurgas ---------------------------------- */
  .sadeleb { position: relative; }
  .sadeleb::after {
    content: "";
    position: absolute;
    inset-block-start: -.5rem;
    inset-inline-end: -.4rem;
    inline-size: 1.6rem;
    aspect-ratio: 1;
    background:
      conic-gradient(from 0deg, transparent 0 42%, rgb(255 255 255 / .95) 47% 53%, transparent 58% 92%, rgb(255 255 255 / .95) 96% 100%),
      radial-gradient(closest-side, rgb(255 255 255 / .9), transparent 65%);
    animation: sadin 3.4s ease-in-out infinite;
    --animation-reduced: none;
    pointer-events: none;
  }
  @keyframes sadin {
    0%, 100% { opacity: .25; scale: .7; rotate: 0deg; }
    50%      { opacity: 1;   scale: 1;  rotate: 45deg; }
  }

  /* --- "keri alla" nool ----------------------------------------------- */
  .keri-alla {
    position: relative;
    z-index: 20;
    text-align: center;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: light-dark(#06405e, #cfeeff);
    text-shadow: 0 1px 0 rgb(255 255 255 / .5);
  }
  .keri-alla i {
    display: block;
    font-style: normal;
    font-size: 1.4rem;
    animation: kukub 1.9s ease-in-out infinite;
    --animation-reduced: none;
  }
  @keyframes kukub {
    0%, 100% { translate: 0 -3px; opacity: .55; }
    50%      { translate: 0 5px;  opacity: 1; }
  }

  /* --- polaroid-laadne pisipilt --------------------------------------- */
  .polaroid {
    padding: .45rem .45rem 1.6rem;
    background: light-dark(#fff, #eef7fb);
    border-radius: .25rem;
    box-shadow: var(--vari-2);
    rotate: var(--pr, -2deg);
  }
  .polaroid .pilt-koht { aspect-ratio: 4 / 3; border-radius: 0; }
  .polaroid figcaption {
    margin-block-start: .45rem;
    text-align: center;
    font-size: .78rem;
    color: #33566a;
  }
}