/* ==========================================================================
   iappear.at – animations.css
   Keyframes + Scroll-Reveal (erste Platzhalter)
   ========================================================================== */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

/* --- Logo + Subtitle Fade-in beim Seitenladen ----------------------------
   Subtiler Einblend-Effekt fuer das i.appear Logo + 'digital city tours'.
   Einmalig beim Laden, nicht in Endlosschleife. Subtitle leicht versetzt
   (Stagger), damit's wie ein leichter Schwung wirkt. */
@keyframes hero-brand-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.hero__logo {
  animation: hero-brand-in .7s var(--ease) backwards;
}
.hero__subtitle {
  animation: hero-brand-in .7s var(--ease) .15s backwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo, .hero__subtitle { animation: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* --- Lorbeerkranz Reveal-Anim (Hero) --------------------------------------
   Symmetrisch von unten nach oben: Ein clip-path-Kreis startet an der
   Unterkante des Kranzes (50%, 100%) mit radius 0 und waechst nach aussen.
   Dadurch erscheint zuerst der untere Treffpunkt beider Kranzhaelften,
   danach wachsen linke und rechte Seite gleichzeitig nach oben.
   Schneller als frueher (2.2s statt 5s). Start: IntersectionObserver.
-------------------------------------------------------------------------- */
.hero__laurel-svg {
  width: 100%;
  height: auto;
  display: block;
  shape-rendering: geometricPrecision;
  /* Kranz ist initial unsichtbar, clip-path auf Radius 0 am unteren Ende */
  clip-path: circle(0% at 50% 100%);
  -webkit-clip-path: circle(0% at 50% 100%);
  opacity: 0;
}
.hero__laurel-svg path {
  stroke: #fff;
  stroke-width: 2;
  fill: none;
  opacity: .4;
}
.hero__laurel.is-drawn .hero__laurel-svg {
  animation: laurel-reveal 2.2s ease-out forwards;
}
@keyframes laurel-reveal {
  0%   { opacity: 0; clip-path: circle(0%   at 50% 100%); -webkit-clip-path: circle(0%   at 50% 100%); }
  10%  { opacity: 1; }
  100% { opacity: 1; clip-path: circle(130% at 50% 100%); -webkit-clip-path: circle(130% at 50% 100%); }
}

/* --- Awards-Rotator (im Kranz mittig) -------------------------------------
   Drei Auszeichnungs-Texte rotieren zyklisch. Jeder Text ist 4s sichtbar,
   mit 2s Fade-Uebergang dazwischen. Gesamtzyklus: 18s (3 Items x 6s).
   Start verzoegert, damit sie nach dem Kranz-Draw (~5s) erscheinen.
-------------------------------------------------------------------------- */
.hero__award {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--f-serif, Georgia, serif);
  font-size: clamp(.85rem, 1.4vw, 1.05rem);
  letter-spacing: .05em;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  padding: 0 var(--sp-3);
  line-height: 1.35;
}
.hero__award small {
  display: block;
  margin-top: .3em;
  font-size: .75em;
  opacity: .7;
  letter-spacing: .15em;
}
.hero__stage.is-drawn .hero__award {
  animation: award-rotate 18s ease-in-out infinite;
  animation-delay: 1.3s;
}
.hero__stage.is-drawn .hero__award.is-award-2 { animation-delay: 7.3s; }
.hero__stage.is-drawn .hero__award.is-award-3 { animation-delay: 13.3s; }

@keyframes award-rotate {
  0%               { opacity: 0; transform: translateY(8px); }
  5%, 28%          { opacity: 1; transform: translateY(0);   }
  33%              { opacity: 0; transform: translateY(-8px);}
  /* Rest des Zyklus bleibt unsichtbar, damit die anderen beiden dran sind */
  100%             { opacity: 0; transform: translateY(-8px);}
}

/* --- Hero Claim Drift (hover parallax) ------------------------------------
   Die vier Zeilen "Die / Plattform / fuer digitale / Erlebnisse" driften
   leicht weg beim Hover — inspiriert vom header-anim-container.
-------------------------------------------------------------------------- */
.hero__claim {
  display: inline-block;
  cursor: default;
}
.hero__claim .line {
  display: block;
  transition: transform .25s ease-out, opacity .25s ease-out;
  will-change: transform;
}
.hero__claim:hover .line-1 { transform: translate(5px, -1px);  opacity: .8;  }
.hero__claim:hover .line-2 { transform: translate(-3px, 0);                  }
.hero__claim:hover .line-3 { transform: translate(7px, 2px);   opacity: .85; }
.hero__claim:hover .line-4 { transform: translate(-4px, 4px);                }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .hero__laurel-svg { clip-path: none; -webkit-clip-path: none; opacity: 1; }
  .hero__laurel-svg path { opacity: .4; }
  .hero__awards li { opacity: 1; transform: none; }
}

/* --- Print-Stylesheet -----------------------------------------------------
   Beim Drucken (z.B. AGB/Datenschutz fuer Aktenablage) soll die Seite
   klassisch schwarz auf weiss sein, ohne Navigation / Footer / Animationen.
-------------------------------------------------------------------------- */
@media print {
  body, html {
    background: #fff !important;
    color: #000 !important;
  }
  .nav, .menu, .footer, .back-up, .back-up-inline, .hero__laurel, .hero__stage,
  .network-viz, .feature-list, .phone, .ia-demo, .breadcrumb, .nav__burger,
  video, .network-caption {
    display: none !important;
  }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: .85em;
    word-break: break-all;
  }
  .container, .section, main, .prose {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
  .page-header { border-bottom: 1px solid #ccc; }
  h1, h2, h3, h4 { color: #000 !important; page-break-after: avoid; }
  .card, .info-card, details.info-card, .vitrine-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
    break-inside: avoid;
  }
  details.info-card[open] > *:not(summary) { animation: none !important; }
  details.info-card > summary { color: #000 !important; opacity: 1 !important; }
  .eyebrow, .muted { color: #555 !important; }
}