/* ==========================================================================
   BUGLIONE YACHT BUILDER — animazioni disegnate in Claude Design
   1. Home: hero 48' (la barca attraversa la scritta e lascia la scia)
   2. Scheda 48': pagina animata
   Si appoggia ai token di style.css; va caricato dopo di esso.
   ========================================================================== */

/* ------------------------------------------------ 1. HOME — HERO 48' */
.orahero { position: relative; height: 340vh; background: #04121e; color: #F7EFE6; }
.orahero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.orahero__stage { position: absolute; inset: 0; overflow: hidden; background: #06253c; }

/* Due piani con la stessa geometria: dietro il mare, davanti scia e barca.
   La scritta sta in mezzo, così lo scafo le passa davanti. */
.orahero__plane {
  position: absolute; left: 0; top: 0;
  width: max(110vw, 165.2vh); aspect-ratio: 2048 / 1364;
  will-change: transform;
}
.orahero__plane--front { pointer-events: none; }
.orahero__plane--back img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.orahero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(4,18,30,.44) 0%, rgba(4,18,30,.1) 24%, rgba(4,18,30,0) 48%, rgba(4,18,30,.1) 74%, rgba(4,18,30,.5) 100%);
}

.orahero__title {
  position: absolute; left: 50%; top: 34%;
  transform: translateX(-50%);
  will-change: transform, opacity;
}
.orahero__word {
  margin: 0;
  font-family: "Archivo", Helvetica, Arial, sans-serif;
  font-style: italic; font-weight: 800; font-variation-settings: "wdth" 112;
  font-size: 20vw; line-height: .72; letter-spacing: -.03em;
  color: #F7EFE6; white-space: nowrap;
  text-shadow: 0 .03em .12em rgba(3,14,26,.28);
}

/* La sfumatura d'ingresso della scia la scrive il JS, in proporzione alla foto */
.orahero__wake {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0;
  background-image: url("../img/hero/scia.webp");
  background-repeat: repeat-x; background-position: left center;
}
.orahero__wake--far  { background-size: auto 118%; }
.orahero__wake--near { background-size: auto 100%; }
.orahero__boat {
  position: absolute; left: 33.789%; top: 39.956%;
  width: 40.479%; max-width: none; height: auto;
  transform-origin: 49.64% 44.41%;
  will-change: transform;
}

.orahero__cta {
  position: absolute; left: var(--pad-inline, 40px); bottom: 40px; z-index: 5;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  will-change: opacity, transform;
}
.orahero__tag {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #F7EFE6;
  text-shadow: 0 1px 10px rgba(3,14,26,.85), 0 0 26px rgba(3,14,26,.7);
}
.orahero__btn {
  display: inline-block; transform: skewX(-11deg);
  background: #FF4B12; padding: 17px 30px;
  text-decoration: none;
  transition: background-color .25s ease;
}
.orahero__btn:hover { background: #ff6331; }
.orahero__btn:focus-visible { outline: 2px solid #F7EFE6; outline-offset: 4px; }
.orahero__btn > span {
  display: inline-flex; align-items: center; gap: 14px; transform: skewX(11deg);
  color: #06253c; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.orahero__btn > span > span { font-size: 16px; }

.orahero__hint {
  position: absolute; right: var(--pad-inline, 40px); bottom: 44px; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(247,239,230,.7);
  will-change: opacity;
}
.orahero__line { position: relative; display: block; width: 1px; height: 58px; background: rgba(247,239,230,.22); overflow: hidden; }
.orahero__line > span { position: absolute; inset: 0; background: #F7EFE6; animation: oraDrop 2.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes oraDrop { 0% { transform: translateY(-100%); } 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } }

@media (max-width: 640px) {
  .orahero__cta { bottom: 28px; }
  .orahero__hint { bottom: 32px; }
}

/* ------------------------------------- 2. SCHEDA 48' — PAGINA ANIMATA */
@keyframes o48-rise  { from { opacity: 0; transform: translate3d(0, 42px, 0); } to { opacity: 1; transform: none; } }
@keyframes o48-pulse { 0% { transform: scaleY(.15); opacity: 0; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes o48-drift { from { transform: scale(1.06) translate3d(-.7%, .5%, 0); } to { transform: scale(1.15) translate3d(.7%, -.7%, 0); } }

/* Senza JS le schede sovrapposte resterebbero tutte visibili: si mostra solo la prima */
.no-js .o48-card:not([data-i="0"]),
.no-js .o48-shot:not([data-i="0"]) { display: none; }

/* ------------------------------------------------------- MOTO RIDOTTO */
@media (prefers-reduced-motion: reduce) {
  .orahero__line > span { animation: none; }
  #o48-hero-track *, .o48-shot { animation: none !important; }
}