/* ==========================================================
   VIORA — Startseite: Licht, Tiefe & Bewegung (nur index.html)
   Ergänzt style.css, ohne Layout, Farben oder Inhalte zu ändern.
   Palette unverändert: Braun (dominant) · Creme · Terrakotta.
   Alle Bewegungen: nur transform / opacity / filter / translate / scale.
   ========================================================== */

:root{
  --fx-ease:cubic-bezier(.16,.8,.3,1);
  --fx-ease-soft:cubic-bezier(.2,.7,.3,1);
  --img-rest:1;
}

@media (prefers-reduced-motion:no-preference){

  /* ------------------------------------------------------
     1) SCROLL-REVEALS — ruhiger Fade-up mit Staffelung
     (ersetzt nur das Timing von .reveal aus style.css; der Hero-Text
     behält sein bisheriges Verhalten)
     ------------------------------------------------------ */
  .reveal:not(.hero-content){
    transform:none;
    transition:transform .6s var(--fx-ease-soft), box-shadow .6s ease;
  }
  .reveal:not(.hero-content).in-view{
    opacity:1;
    animation:fx-rise 1.15s var(--fx-ease) backwards;
    animation-delay:calc(var(--i,0) * 90ms);
  }
  @keyframes fx-rise{
    from{opacity:0;transform:translateY(26px);}
    to{opacity:1;transform:none;}
  }

  /* Staffelung (rein per CSS) */
  .intro-card,.about-text,.menu-media{--i:1;}
  .features .feature:nth-child(2){--i:1;}
  .features .feature:nth-child(3){--i:2;}
  .menu-cats .menu-cat:nth-child(2){--i:1;}
  .menu-cats .menu-cat:nth-child(3){--i:2;}
  .menu-cats .menu-cat:nth-child(4){--i:3;}
  .gallery-grid .g-item:nth-child(2){--i:1;}
  .gallery-grid .g-item:nth-child(3){--i:2;}
  .gallery-grid .g-item:nth-child(4){--i:3;}
  .gallery-grid .g-item:nth-child(5){--i:4;}
  .gallery-grid .g-item:nth-child(6){--i:5;}

  /* ------------------------------------------------------
     2) BILDER — langsames "Licht an"-Reveal + weiches Hover
     Bilddateien, Zuschnitt und Layout bleiben unverändert.
     ------------------------------------------------------ */
  .intro-media img{
    transition:transform .8s var(--fx-ease-soft), filter 1.3s ease;
  }
  .about-media img{
    transition:transform .8s var(--fx-ease-soft), filter 1.3s ease, scale 1.8s var(--fx-ease-soft);
  }
  .g-item img{
    transition:transform .9s ease, filter 1.3s ease, scale 1.8s var(--fx-ease-soft);
  }
  .menu-media-main img,
  .menu-media-accent img{
    transition:transform 1s var(--fx-ease-soft), filter 1.3s ease, scale 1.8s var(--fx-ease-soft);
  }
  .about-media img,
  .g-item img,
  .menu-media-main img,
  .menu-media-accent img{scale:var(--img-rest);}

  .intro-media:not(.in-view) img{
    filter:saturate(.95) sepia(.06) brightness(.82);
  }
  .about-media:not(.in-view) img,
  .g-item:not(.in-view) img,
  .menu-media:not(.in-view) img{
    filter:saturate(.95) sepia(.06) brightness(.82);
    scale:calc(var(--img-rest) + .1);
  }

  /* softer Helligkeitswechsel beim Hover (zusätzlich zum vorhandenen Zoom);
     nur bei Geräten mit echtem Hover, damit auf Touch nichts "hängen" bleibt */
  @media (hover:hover){
    .intro-media:hover img,
    .about-media:hover img,
    .g-item:hover img,
    .menu-media-main:hover img,
    .menu-media-accent:hover img{
      filter:saturate(1.03) sepia(.03) brightness(1.05);
    }
  }

  /* ------------------------------------------------------
     3) HOVER — Buttons, Karten, Links
     ------------------------------------------------------ */
  .btn{
    transition:color .45s ease, border-color .45s ease, transform .3s ease, box-shadow .4s ease, scale .35s ease;
  }
  .btn:active{scale:1;}
  .menu-cat{transition:border-color .5s ease;}
  .menu-cat h3{transition:color .5s ease;}
  .cta-contact{transition:border-color .4s ease, opacity .4s ease;}

  @media (hover:hover){
    .btn:hover{scale:1.02;}
    .btn-solid:hover{
      box-shadow:0 14px 28px rgba(32,20,13,.22), 0 0 34px rgba(198,122,86,.38);
    }
    .btn-solid-cream:hover{
      box-shadow:0 14px 28px rgba(32,20,13,.25), 0 0 30px rgba(247,240,229,.28);
    }
    .btn-line:hover{
      box-shadow:0 12px 26px rgba(32,20,13,.25), 0 0 28px rgba(198,122,86,.35);
    }
    .nav-cta:hover{
      box-shadow:0 8px 22px rgba(0,0,0,.25), 0 0 24px rgba(198,122,86,.32);
    }

    /* Hover-Lift der Karten: in style.css wird er durch .reveal.in-view überschrieben,
       hier mit höherer Spezifität wiederhergestellt */
    .reveal.in-view.feature:hover{transform:translateY(-6px);}
    .reveal.in-view.menu-cat:hover{transform:translateY(-4px);}
    .reveal.in-view.g-item:hover{
      transform:translateY(-8px);
      box-shadow:0 26px 48px rgba(32,20,13,.24);
    }
    .menu-cat:hover{border-top-color:rgba(226,166,136,.55);}
    .menu-cat:hover h3{color:var(--terracotta-soft);}
    .cta-contact:hover{opacity:1;border-bottom-color:rgba(255,255,255,.85);}
    .marquee:hover .marquee-track{animation-play-state:paused;}
  }

  /* ------------------------------------------------------
     4) RÄUMLICHE TIEFE — weiche Schatten an Sektionsübergängen
     ------------------------------------------------------ */
  .menu-block{
    isolation:isolate;
    box-shadow:0 -28px 60px -26px rgba(32,20,13,.22), 0 28px 60px -26px rgba(32,20,13,.22);
  }
  .menu-block-inner{position:relative;z-index:1;}
  .cta-band-panel{
    box-shadow:0 34px 70px -30px rgba(167,95,64,.5);
  }
  .cta-band-inner{z-index:1;}
  .site-footer{box-shadow:0 -28px 60px -26px rgba(32,20,13,.28);}
}

/* ----------------------------------------------------------
   5) SCROLL-TIEFE / PARALLAX (CSS Scroll-driven Animations)
   Kein JavaScript. Browser ohne Unterstützung sehen unveränderte Bilder.
   ---------------------------------------------------------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .about-media,.g-item,.menu-media-main,.menu-media-accent{--img-rest:1.07;}

    .about-media img,
    .g-item img,
    .menu-media-main img,
    .menu-media-accent img{
      animation:fx-par-img linear both;
      animation-timeline:view();
    }
    @keyframes fx-par-img{
      from{translate:0 -3%;}
      to{translate:0 3%;}
    }

    /* Ebenen mit leicht unterschiedlicher Geschwindigkeit = Tiefe */
    .intro-media-frame{animation:fx-par-slow linear both;animation-timeline:view();}
    .intro-card{animation:fx-par-fast linear both;animation-timeline:view();}
    .intro-bignum{animation:fx-par-num linear both;animation-timeline:view();}
    .menu-media-accent{animation:fx-par-fast linear both;animation-timeline:view();}
    @keyframes fx-par-slow{
      from{translate:0 14px;}
      to{translate:0 -14px;}
    }
    @keyframes fx-par-fast{
      from{translate:0 14px;}
      to{translate:0 -14px;}
    }
    @keyframes fx-par-num{
      from{translate:0 32px;}
      to{translate:0 -32px;}
    }
  }
}

/* ----------------------------------------------------------
   6) CURSOR-SPOTLIGHT — Licht, das sich leicht im Raum bewegt
   Nur bei Maus/Trackpad (hover:hover + pointer:fine) und nur, wenn
   home-fx.js die Klasse .fx-on gesetzt hat. Kein Raster, keine Linien.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){

  html.fx-on .menu-block::before,
  html.fx-on .cta-band-panel::after,
  html.fx-on .intro-card::before{
    content:'';
    position:absolute;
    left:0;top:0;
    width:var(--fx-size);
    height:var(--fx-size);
    margin:calc(var(--fx-size) / -2) 0 0 calc(var(--fx-size) / -2);
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    transform:translate3d(var(--sx,0px), var(--sy,0px), 0);
    transition:opacity 1.2s ease;
    will-change:transform,opacity;
    z-index:0;
  }

  /* Hero — kein Kreis, sondern zwei weiche Lichtkegel, die zusammen ein sehr großes V ergeben.
     Der Scheitelpunkt liegt unterhalb des sichtbaren Bereichs (50% / 118% der Hero-Höhe),
     die Arme öffnen sich nach oben (±26°) und laufen weich aus. Kein Logo, keine Kante:
     Winkel-Verlauf (conic-gradient) + radiale Ausblendung. Außen Terrakotta, im Kern Creme.
     Die Maus verschiebt/neigt das V nur minimal (transform → läuft über die GPU). */
  html.fx-on .hero-overlay::before{
    content:'';
    position:absolute;
    inset:-12%;                       /* Reserve, damit beim Mitwandern nie eine Kante sichtbar wird */
    pointer-events:none;
    background:
      conic-gradient(from 0deg at 50% 104.8%, transparent 0deg, rgba(247,240,229,0) 18deg, rgba(247,240,229,0.013) 20deg, rgba(247,240,229,0.041) 22deg, rgba(247,240,229,0.072) 24deg, rgba(247,240,229,0.09) 26deg, rgba(247,240,229,0.072) 28deg, rgba(247,240,229,0.041) 30deg, rgba(247,240,229,0.013) 32deg, rgba(247,240,229,0) 34deg, rgba(247,240,229,0) 326deg, rgba(247,240,229,0.013) 328deg, rgba(247,240,229,0.041) 330deg, rgba(247,240,229,0.072) 332deg, rgba(247,240,229,0.09) 334deg, rgba(247,240,229,0.072) 336deg, rgba(247,240,229,0.041) 338deg, rgba(247,240,229,0.013) 340deg, rgba(247,240,229,0) 342deg, transparent 360deg),
      conic-gradient(from 0deg at 50% 104.8%, transparent 0deg, rgba(226,166,136,0) 8deg, rgba(226,166,136,0.021) 12.5deg, rgba(226,166,136,0.068) 17deg, rgba(226,166,136,0.12) 21.5deg, rgba(226,166,136,0.15) 26deg, rgba(226,166,136,0.12) 30.5deg, rgba(226,166,136,0.068) 35deg, rgba(226,166,136,0.021) 39.5deg, rgba(226,166,136,0) 44deg, rgba(226,166,136,0) 316deg, rgba(226,166,136,0.021) 320.5deg, rgba(226,166,136,0.068) 325deg, rgba(226,166,136,0.12) 329.5deg, rgba(226,166,136,0.15) 334deg, rgba(226,166,136,0.12) 338.5deg, rgba(226,166,136,0.068) 343deg, rgba(226,166,136,0.021) 347.5deg, rgba(226,166,136,0) 352deg, transparent 360deg),
      radial-gradient(ellipse 60% 38% at 50% 104.8%, rgba(198,122,86,.07), rgba(198,122,86,0) 100%);
    -webkit-mask-image:radial-gradient(circle 160vh at 50% 104.8%, #000 0, rgba(0,0,0,.92) 25%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.22) 75%, transparent 100%);
            mask-image:radial-gradient(circle 160vh at 50% 104.8%, #000 0, rgba(0,0,0,.92) 25%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.22) 75%, transparent 100%);
    transform-origin:50% 104.8%;
    transform:translate3d(calc(var(--nx,0) * 2.2vw), calc(var(--ny,0) * 1.6vh), 0) rotate(calc(var(--nx,0) * 2.5deg));
    opacity:.55;
    transition:opacity 1.6s ease;
    animation:fx-v-breathe 18s ease-in-out infinite alternate;
    will-change:transform,opacity;
  }
  html.fx-on .hero.fx-active .hero-overlay::before{opacity:1;}
  @keyframes fx-v-breathe{
    from{scale:1;}
    to{scale:1.035;}
  }

  /* Menü-Block (dunkles Braun) — Terrakotta-Licht auf Braun */
  html.fx-on .menu-block{--fx-size:clamp(480px,52vmax,920px);}
  html.fx-on .menu-block::before{
    background:radial-gradient(circle closest-side, rgba(198,122,86,.15), rgba(226,166,136,.05) 50%, rgba(226,166,136,0) 100%);
  }

  /* Reservierungs-Panel (Terrakotta) — warmes Creme-Licht */
  html.fx-on .cta-band-panel{--fx-size:clamp(420px,46vmax,760px);}
  html.fx-on .cta-band-panel::after{
    background:radial-gradient(circle closest-side, rgba(255,240,225,.22), rgba(255,240,225,.07) 50%, rgba(255,240,225,0) 100%);
  }

  /* Willkommens-Karte (Creme) — Terrakotta-Hauch + Schatten wandert gegen das Licht */
  html.fx-on .intro-card{
    --fx-size:460px;
    overflow:hidden;
    box-shadow:calc(var(--nx,0) * -16px) calc(30px + var(--ny,0) * -10px) 60px rgba(32,20,13,.12);
  }
  html.fx-on .intro-card::before{
    background:radial-gradient(circle closest-side, rgba(198,122,86,.11), rgba(198,122,86,.04) 52%, rgba(198,122,86,0) 100%);
  }
  html.fx-on .intro-card > *{position:relative;z-index:1;}

  html.fx-on .menu-block.fx-active::before,
  html.fx-on .cta-band-panel.fx-active::after,
  html.fx-on .intro-card.fx-active::before{opacity:1;}
}