/* Motion and editorial hero layer — intentionally compositor-only. */

.s-hero-shell {
  min-height: max(760px, calc(100svh - 24px));
  isolation: isolate;
}

.s-hero .h-header { z-index: 20; }

.s-hero-kicker { z-index: 12; }

.s-hero-title {
  z-index: 2;
  top: 21%;
  left: 50%;
  width: 100%;
  font-size: clamp(112px, 17vw, 290px);
  font-weight: 900;
  line-height: .69;
  letter-spacing: -.09em;
  text-align: center;
  translate: -50% 0;
}

.s-hero-title span:first-child { color: #aebdff; }
.s-hero-title span:last-child { color: var(--blue); }

.s-hero-halo {
  position: absolute;
  z-index: 1;
  top: 54%;
  left: 50%;
  width: min(58vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--powder-2);
  translate: -50% -50%;
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform .55s cubic-bezier(.2, .75, .2, 1);
  pointer-events: none;
}

.s-hero-product {
  z-index: 4;
  top: 55%;
  right: auto;
  left: 50%;
  width: min(64vw, 940px);
  height: 52%;
  transform: none;
  translate: -50% -50%;
}

.m-reveal-layer,
.m-parallax-layer,
.m-float-layer {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.m-parallax-layer {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform .55s cubic-bezier(.2, .75, .2, 1);
}

.m-float-layer {
  animation: watch-float 5.2s ease-in-out infinite;
  animation-play-state: paused;
  transition: scale .45s cubic-bezier(.2, .75, .2, 1);
}

.m-float-layer--slow { animation-duration: 6.8s; }
.is-motion-active .m-float-layer { animation-play-state: running; }
.is-motion-active .m-float-layer,
.is-motion-active [data-parallax-layer] { will-change: transform; }
.s-hero-product:hover .m-float-layer,
.s-quiet-stage:hover .m-float-layer { scale: 1.025; }
.s-hero-product:hover img { transform: none; }

.s-hero-shadow {
  position: absolute;
  z-index: 3;
  top: 69%;
  left: 50%;
  width: min(34vw, 480px);
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(11, 17, 25, .24), rgba(11, 17, 25, 0) 70%);
  translate: -50% -50%;
  pointer-events: none;
}

.s-hero-copy { z-index: 8; }
.s-hero-copy small {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.s-hero-product-meta { z-index: 8; }

.s-hero-motion-note {
  position: absolute;
  z-index: 8;
  bottom: 42px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  translate: -50% 0;
}

.s-hero-motion-note i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(44, 77, 255, .1);
}

.s-hero-spec {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .11em;
  animation: spec-float 6.4s ease-in-out infinite;
  animation-play-state: paused;
}

.s-hero-spec i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff5a3d;
}

.s-hero-spec--one { top: 35%; left: 12%; }
.s-hero-spec--two { top: 64%; right: 12%; animation-delay: -2.7s; }
.is-motion-active .s-hero-spec { animation-play-state: running; }

/* Braun becomes a quieter, asymmetric editorial moment. */
.s-type-card { padding: 0; }

.s-type-card > span {
  top: 22px;
  right: 22px;
  left: 22px;
}

.s-type-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.s-type-card em {
  right: 22px;
  bottom: 22px;
}

.s-quiet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 12px;
  background: var(--powder);
}

.s-quiet-copy,
.s-quiet-stage {
  min-height: 880px;
  overflow: hidden;
  border-radius: var(--radius);
}

.s-quiet-copy {
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  background: var(--paper);
}

.s-quiet-copy h2 {
  margin: auto 0 28px;
  font-size: clamp(74px, 8vw, 145px);
  font-weight: 900;
  line-height: .76;
  letter-spacing: -.085em;
}

.s-quiet-copy h2 span { color: var(--blue); }

.s-quiet-copy > p {
  max-width: 430px;
  margin: 0 0 48px;
  color: #414b58;
  font-size: 14px;
  line-height: 1.7;
}

.s-quiet-copy dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 35px;
  border-top: 1px solid var(--line);
}

.s-quiet-copy dl div { padding: 16px 10px 0 0; }
.s-quiet-copy dt { font-size: 15px; font-weight: 750; }
.s-quiet-copy dd { margin: 4px 0 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .11em; }

.s-quiet-copy > a {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 12px 11px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.s-quiet-copy > a b { font-size: 15px; transition: translate .25s ease; }
.s-quiet-copy > a:hover b { translate: 4px -4px; }
.s-hero-product-meta a b,
.s-round-link { transition: translate .25s ease, rotate .25s ease; }
.s-hero-product-meta a:hover b { translate: 4px -4px; rotate: -8deg; }

.s-quiet-stage {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--powder-2);
}

.s-quiet-stage > .m-parallax-layer {
  position: absolute;
  z-index: 2;
  inset: 8% 20%;
  width: auto;
  height: auto;
}

.s-quiet-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.s-quiet-orbit {
  position: absolute;
  z-index: 1;
  width: min(36vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(44, 77, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .18), 0 0 0 140px rgba(255, 255, 255, .12);
  animation: orbit-drift 32s linear infinite;
  animation-play-state: paused;
}

.s-quiet-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 7px rgba(44, 77, 255, .09);
}

.is-motion-active .s-quiet-orbit { animation-play-state: running; }

.s-quiet-index {
  position: absolute;
  right: 30px;
  bottom: 28px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* One-time reveals. The page remains fully visible if JavaScript is unavailable. */
.has-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity .75s ease, transform .86s cubic-bezier(.12, .23, .5, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.has-motion [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.has-motion .h-header { animation: nav-in .78s cubic-bezier(.12, .23, .5, 1) both; }
.has-motion .s-hero-kicker { animation: copy-in .8s .12s cubic-bezier(.12, .23, .5, 1) both; }
.has-motion .s-hero-title span { animation: title-in 1.05s .18s cubic-bezier(.12, .23, .5, 1) both; }
.has-motion .s-hero-title span:last-child { animation-delay: .26s; }
.has-motion .s-hero-halo { animation: halo-in 1s .12s cubic-bezier(.12, .23, .5, 1) both; }
.has-motion .s-hero-product .m-reveal-layer { animation: product-in 1.05s .2s cubic-bezier(.12, .23, .5, 1) both; }
.has-motion .s-hero-shadow { animation: shadow-in 1s .22s cubic-bezier(.12, .23, .5, 1) both; }
.has-motion .s-hero-copy,
.has-motion .s-hero-product-meta,
.has-motion .s-hero-motion-note { animation: copy-in .8s .62s cubic-bezier(.12, .23, .5, 1) both; }

.has-motion .p-main.is-cutout img { animation: pdp-float 6.2s ease-in-out infinite; }

@keyframes title-in {
  from { opacity: 0; transform: translate3d(0, 50px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes nav-in {
  from { opacity: 0; translate: 0 -18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes copy-in {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes halo-in {
  from { opacity: 0; scale: .9; }
  to { opacity: 1; scale: 1; }
}

@keyframes product-in {
  from { opacity: 0; transform: translate3d(0, -70px, 0) rotate(-7deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes shadow-in {
  from { opacity: 0; scale: .55; translate: -50% 40px; }
  to { opacity: 1; scale: 1; translate: -50% -50%; }
}

@keyframes watch-float {
  0%, 100% { transform: translate3d(0, -7px, 0) rotate(-.35deg); }
  50% { transform: translate3d(0, 10px, 0) rotate(.35deg); }
}

@keyframes spec-float {
  0%, 100% { transform: translate3d(0, -5px, 0); }
  50% { transform: translate3d(0, 6px, 0); }
}

@keyframes pdp-float {
  0%, 100% { transform: translate3d(0, -4px, 0) rotate(-.18deg); }
  50% { transform: translate3d(0, 7px, 0) rotate(.18deg); }
}

@keyframes orbit-drift { to { rotate: 1turn; } }

@media (max-width: 1000px) {
  .s-hero-title { font-size: 18vw; }
  .s-hero-product { right: auto; width: 74vw; }
  .s-hero-spec--one { left: 7%; }
  .s-hero-spec--two { right: 7%; }
  .s-quiet-copy,
  .s-quiet-stage { min-height: 760px; }
}

@media (max-width: 720px) {
  .s-hero-shell { min-height: 850px; }
  .s-hero-title {
    top: 150px;
    left: 50%;
    font-size: 24vw;
    line-height: .7;
    letter-spacing: -.085em;
  }
  .s-hero-halo { top: 49%; width: 116vw; }
  .s-hero-product {
    top: 49%;
    left: 50%;
    width: 122vw;
    height: 340px;
    translate: -50% -50%;
  }
  .s-hero-shadow { top: 61%; width: 72vw; height: 34px; }
  /* Ueber dem Zurueck-Knopf der Studie (44 px hoch, 12 px ueber dem Rand). */
  .s-hero-copy { bottom: 196px; }
  .s-hero-copy small { font-size: 12px; }
  .s-hero-motion-note,
  .s-hero-spec { display: none; }
  .s-hero-product-meta { bottom: 76px; }
  .m-float-layer { animation-name: watch-float-mobile; }

  .s-quiet { grid-template-columns: 1fr; padding: 6px; }
  .s-quiet-copy { min-height: 650px; padding: 55px 20px 28px; }
  .s-quiet-stage { min-height: 720px; }
  .s-quiet-copy h2 { margin-top: auto; font-size: 17vw; }
  .s-quiet-copy > p { margin-bottom: 32px; font-size: 13px; }
  .s-quiet-copy dl { gap: 7px; }
  .s-quiet-copy dt { font-size: 14px; }
  .s-quiet-stage > .m-parallax-layer { inset: 8% 13%; }
  .s-quiet-orbit { width: 82vw; }
}

@keyframes watch-float-mobile {
  0%, 100% { transform: translate3d(0, -4px, 0) rotate(-.2deg); }
  50% { transform: translate3d(0, 5px, 0) rotate(.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal],
  .m-parallax-layer,
  .s-hero-halo {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .s-hero-halo { transform: none !important; }
  .m-float-layer,
  .s-hero-spec,
  .s-quiet-orbit,
  .has-motion .h-header,
  .has-motion .s-hero-kicker,
  .has-motion .s-hero-title span,
  .has-motion .s-hero-halo,
  .has-motion .s-hero-product .m-reveal-layer,
  .has-motion .s-hero-shadow,
  .has-motion .s-hero-copy,
  .has-motion .s-hero-product-meta,
  .has-motion .s-hero-motion-note,
  .has-motion .p-main.is-cutout img {
    animation: none !important;
  }
}

/* Lesbarkeit (Runde 5, AK: "teilweise sehr sehr klein"): Die festen
   Schriftgroessen unter 15 px in sneako.css und motion.css sind angehoben,
   7/8 -> 12, 9/10 -> 13, 11/12 -> 14, 13/14 -> 15 px; die Abstufung zwischen
   Label, Meta und Text bleibt. Fliesstext steht hier auf 16 px, am Handy
   auf 15 px. */
.s-hero-copy p,
.s-manifesto-copy p,
.s-quiet-copy > p,
.s-types-head p,
.s-collection-head p,
.s-standard-copy p,
.s-standard li,
.s-notes-head p,
.s-visit p,
.p-lead,
.p-info p {
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .s-hero-copy p,
  .s-manifesto-copy p,
  .s-quiet-copy > p,
  .s-types-head p,
  .s-collection-head p,
  .s-standard-copy p,
  .s-standard li,
  .s-notes-head p,
  .s-visit p,
  .p-lead,
  .p-info p {
    font-size: 15px;
  }
}