/* Lab experiments: unwoven image strip + scroll-driven fullscreen video */

/* --- unwoven strip -------------------------------------------------- */

.section.unwoven-strip {
  height: 64vh;
  min-height: 380px;
}

.section.unwoven-strip .stage {
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
  overflow: hidden;
}

.section.unwoven-strip .stage.is-dragging {
  cursor: grabbing;
}

.section.unwoven-strip .stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* marquee fallback when WebGL is unavailable */
.section.unwoven-strip .marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.section.unwoven-strip .marquee__track {
  display: flex;
  gap: 32px;
  align-items: center;
  animation: unwoven-marquee 40s linear infinite;
  will-change: transform;
}

.section.unwoven-strip .marquee__track img {
  width: 300px;
  height: 400px;
  object-fit: cover;
  flex: none;
}

@keyframes unwoven-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .section.unwoven-strip .marquee__track { animation: none; }
}

/* il pannello scalato con transform non deve creare scroll orizzontale */
.app-main {
  overflow-x: clip;
}

.video-scroller {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 60; /* il pannello espanso deve coprire il resto della pagina */
}

.video-scroller__frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  /* tint del tema sopra un fondo opaco: identico a prima a riposo,
     ma niente trasparenze quando copre la pagina */
  background:
    linear-gradient(var(--color--foreground--5, #f5f5f7), var(--color--foreground--5, #f5f5f7)),
    var(--color--background--100, #fff);
  overflow: hidden;
}

.video-scroller__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* durante il takeover l'interfaccia del sito si dissolve */
.app-header,
.app-nav,
.app-aside {
  transition: opacity 0.4s ease;
}

body.video--takeover .app-header,
body.video--takeover .app-nav,
body.video--takeover .app-aside {
  opacity: 0;
  pointer-events: none;
}

/* parole animabili del finale contatto */
.section.contact .interest h2 .w {
  display: inline-block;
  will-change: transform, opacity;
}

/* --- caroselli: crop pieno e centrato, mai bande grigie ---------------- */

.keen-slider__slide {
  height: 600px;
  max-height: 100vh;
  background: var(--color--foreground--5, #eee) !important; /* solo durante il load */
  overflow: hidden;
}

.keen-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- graffiti di luce -------------------------------------------------- */

.graffiti-canvas {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none; /* trasparente ai click finché la modalità è off */
}

.graffiti-canvas.is--active {
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
}

.graffiti-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 8001;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color--foreground--10, rgba(0, 0, 0, 0.1));
  color: var(--color--foreground--100, #000);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.graffiti-toggle svg {
  width: 20px;
  height: 20px;
}

.graffiti-toggle:hover {
  background: var(--color--foreground--15, rgba(0, 0, 0, 0.15));
  transform: scale(1.06);
}

.graffiti-toggle.is--active {
  background: var(--color--foreground--100, #000);
  color: var(--color--background--100, #fff);
  box-shadow: 0 0 18px 2px rgba(140, 120, 255, 0.55);
}

/* HUD fisso per caption + toggle audio, visibile solo verso il fullscreen */
.video-hud {
  position: fixed;
  inset: 0;
  z-index: 9600;
  opacity: 0;
  pointer-events: none;
}

/* i controlli dell'HUD esistono solo quando il cinema è aperto:
   da chiusi non devono rubare click a ciò che sta sotto */
.video-hud .av-audio-toggle,
.video-hud .av-close {
  pointer-events: none;
}

body.video--takeover .video-hud .av-audio-toggle,
body.video--takeover .video-hud .av-close {
  pointer-events: auto;
}

.video-scroller__caption,
.video-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 24px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.02em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Apple-style audio on/off toggle */
/* stessa taglia e stessa posizione della matita: la copre al pixel */
.av-audio-toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 3;
}

.av-audio-toggle:hover {
  background: rgba(223, 223, 227, 0.8);
  transform: scale(1.06);
}

.av-audio-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* chiusura della modalità cinema, gemella del close della gallery */
.av-close {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  transition: background 0.2s ease, transform 0.2s ease;
}

.av-close:hover {
  background: rgba(223, 223, 227, 0.8);
  transform: scale(1.06);
}

.av-close svg {
  width: 18px;
  height: 18px;
}

/* --- explore cards (external Apple links) ---------------------------- */

.explore-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0 48px;
}

.explore-card {
  display: block;
  background: var(--color--foreground--5, #f5f5f7);
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.6s ease;
}

.explore-card figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.explore-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.explore-card:hover figure img {
  transform: scale(1.07);
}

.explore-card__meta {
  padding: 20px 22px 24px;
}

/* Solo le card parlano "Apple": San Francisco (font di sistema Apple) */
.explore-card__meta,
.explore-card__meta * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}

.explore-card__meta h3 {
  font-weight: 600;
  letter-spacing: -0.015em; /* tracking stretto alla Apple */
}

.explore-card__eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color--foreground--50);
  margin-bottom: 6px;
}

.explore-card__meta h3 {
  font-size: 26px;
  line-height: 1.15;
  color: var(--color--foreground--100);
  margin: 0 0 10px;
}

.explore-card__cta {
  font-size: 14px;
  color: var(--color--foreground--50);
  transition: color 0.2s ease;
}

.explore-card:hover .explore-card__cta {
  color: var(--color--foreground--100);
}

@media (max-width: 734px) {
  .explore-cards { grid-template-columns: 1fr; }
}

/* --- logo magic (aurora Apple Intelligence all'hover) ----------------- */

.section.background .item .logo {
  position: relative;
}

/* filo di luce attorno al badge: lo spettro della ai-sphere (iOS27) —
   blu → ciano → bianco caldo → oro → rosso. Nucleo sottile... */
.section.background .item .logo::before,
.section.background .item .logo::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 0deg,
    #1959ff, #26d9ff, #f2fff4, #fff9cc, #ffa82e, #ff3319, #1959ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* l'animazione gira SOLO all'hover: 12 layer blur+mask sempre in moto
     mettono in ginocchio il compositore grafico */
  animation: aurora-spin 6s linear infinite;
  animation-play-state: paused;
  z-index: -1;
}

.section.background .item .logo:hover::before,
.section.background .item .logo:hover::after {
  animation-play-state: running;
}

/* ...più un alone largo e debole: è quello che separa una luce vera
   da una sfumatura disegnata */
.section.background .item .logo::after {
  filter: blur(9px);
}

.section.background .item .logo:hover::before {
  opacity: 0.95;
}

.section.background .item .logo:hover::after {
  opacity: 0.5;
}

@keyframes aurora-spin {
  to { transform: rotate(360deg); }
}

.section.background .item .logo .content {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.section.background .item .logo:hover .content {
  transform: scale(1.07);
}

/* all'hover il glifo resta pieno, bianco: l'aurora vive solo dietro */
.section.background .item .logo .content svg path,
.section.background .item .logo .content svg circle,
.section.background .item .logo .content svg rect,
.section.background .item .logo .content svg polygon {
  transition: fill 0.4s ease;
}

.section.background .item .logo:hover .content svg path,
.section.background .item .logo:hover .content svg circle,
.section.background .item .logo:hover .content svg rect,
.section.background .item .logo:hover .content svg polygon {
  fill: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .section.background .item .logo::before { animation: none; }
}


@media (prefers-reduced-motion: reduce) {
  .video-scroller {
    padding: 24px 0;
  }
}