/* ==========================================================================
   Logo Torino em 3D — camadas empilhadas (extrusão) em CSS 3D, sem bibliotecas.
   Quadro da logo: 371 x 139 (as imagens de /img têm esse tamanho e se encaixam).
   ========================================================================== */
.l3d {
  --l: min(440px, 80vw);          /* largura da logo */
  --prof: calc(var(--l) / 380);   /* distância entre camadas da extrusão */
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  isolation: isolate; /* sem overflow: o brilho e o piso se espalham até a borda da tela */
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; /* sem o menu "salvar imagem" ao segurar o dedo na logo */
}
.l3d-particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* Luz dourada atrás da logo */
.l3d-brilho {
  position: absolute; z-index: 0;
  width: calc(var(--l) * 1.35); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 217, 145, 0.62) 0%, rgba(201, 161, 59, 0.16) 42%, transparent 68%);
  animation: l3d-pulsar 5.5s ease-in-out infinite;
}
@keyframes l3d-pulsar { 50% { transform: scale(1.12); opacity: .75; } }

/* Piso em perspectiva andando na direção de quem olha */
.l3d-piso {
  position: absolute; z-index: 0;
  left: -60%; right: -60%; bottom: -6%; height: 62%;
  overflow: hidden;
  transform: perspective(520px) rotateX(72deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 24%, rgba(0, 0, 0, .5) 50%, transparent 88%);
  mask-image: linear-gradient(to top, transparent 0%, #000 24%, rgba(0, 0, 0, .5) 50%, transparent 88%);
}
/* A grade anda com transform (a placa de vídeo só desloca a imagem). Antes era background-position,
   que obrigava a redesenhar o piso inteiro a cada quadro — pesado no celular. */
.l3d-piso::before {
  --passo: 52px;
  content: ''; position: absolute; left: 0; right: 0; top: calc(var(--passo) * -1); bottom: 0;
  background-image:
    linear-gradient(rgba(176, 138, 46, 0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176, 138, 46, 0.26) 1px, transparent 1px);
  background-size: var(--passo) var(--passo);
  animation: l3d-piso 2.8s linear infinite;
}
@keyframes l3d-piso { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--passo), 0); } }

/* Sombra no chão, acompanhando a flutuação */
.l3d-sombra {
  position: absolute; z-index: 1; left: 50%; top: calc(50% + var(--l) * 0.36);
  width: calc(var(--l) * 0.82); height: calc(var(--l) * 0.08); margin-left: calc(var(--l) * -0.41);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(52, 40, 12, 0.34), rgba(52, 40, 12, 0.08) 70%, transparent);
  filter: blur(3px);
  animation: l3d-sombra 4.4s ease-in-out infinite;
}
@keyframes l3d-sombra { 50% { transform: scale(.86); opacity: .7; } }

/* Cena 3D */
.l3d-cena { position: relative; z-index: 3; perspective: 1100px; perspective-origin: 50% 38%; }
.l3d-giro {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}
.l3d-balanco { transform-style: preserve-3d; animation: l3d-balanco 12s ease-in-out infinite alternate; }
@keyframes l3d-balanco {
  0% { transform: rotateY(-24deg) rotateX(9deg); }
  50% { transform: rotateY(4deg) rotateX(-5deg) translateZ(24px); }
  100% { transform: rotateY(26deg) rotateX(7deg); }
}
.l3d-entrada { transform-style: preserve-3d; animation: l3d-entrada 1.8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes l3d-entrada { from { transform: rotateY(-120deg) rotateX(30deg) scale(.35); opacity: 0; } 55% { opacity: 1; } }

.l3d-logo { position: relative; width: var(--l); aspect-ratio: 371 / 139; transform-style: preserve-3d; cursor: pointer; touch-action: manipulation; }
.l3d-logo.pirueta { animation: l3d-pirueta 1.4s cubic-bezier(.5, 0, .2, 1); }
@keyframes l3d-pirueta { 50% { transform: rotateY(180deg) scale(1.08); } to { transform: rotateY(360deg); } }

/* Letras: cada camada é a silhueta das letras (máscara) pintada de uma cor.
   A da frente é laca preta com reflexo dourado; as de trás formam a lateral dourada. */
.l3d-letras {
  position: absolute; inset: 0;
  -webkit-mask: url(/img/torino-letras.png) center / 100% 100% no-repeat;
  mask: url(/img/torino-letras.png) center / 100% 100% no-repeat;
  transform: translateZ(calc(var(--k, 0) * -1px * var(--prof) * 1.15));
  animation: l3d-chegar 1.3s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--k, 0) * 30ms + 120ms);
}
.l3d-letras.face {
  background: linear-gradient(105deg, #070606 0%, #1b1916 34%, #d4ab48 44%, #fff3c4 50%, #d4ab48 56%, #1b1916 66%, #070606 100%);
  background-size: 360% 100%;
  background-position: 115% 0;
  animation: l3d-chegar 1.3s cubic-bezier(.16, 1, .3, 1) 120ms both, l3d-reflexo 5.5s ease-in-out 1.8s infinite;
}
.l3d-letras.lado { background: linear-gradient(180deg, hsl(43 74% calc(26% + var(--luz) * 38%)), hsl(39 76% calc(14% + var(--luz) * 26%))); }
.l3d-letras.fundo { background: #2b200a; }
@keyframes l3d-chegar { from { transform: translateZ(-760px) rotateX(46deg); opacity: 0; } }
@keyframes l3d-reflexo { 0% { background-position: 115% 0; } 42%, 100% { background-position: -15% 0; } }

/* Coroa: cai girando, flutua e de tempos em tempos dá uma volta completa */
.l3d-coroa {
  position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 55.1% 13.7%;
  animation: l3d-coroa-cai 1.6s cubic-bezier(.34, 1.45, .64, 1) .6s both, l3d-flutua 4.4s ease-in-out 2.2s infinite;
}
@keyframes l3d-coroa-cai {
  from { transform: translate3d(0, -170%, 160px) rotateY(-720deg); opacity: 0; }
  25% { opacity: 1; }
  to { transform: translate3d(0, 0, calc(var(--l) * .05)); }
}
@keyframes l3d-flutua {
  0%, 100% { transform: translate3d(0, 0, calc(var(--l) * .05)); }
  50% { transform: translate3d(0, -5%, calc(var(--l) * .1)); }
}
.l3d-coroa-gira { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 55.1% 13.7%; animation: l3d-coroa-gira 7.5s cubic-bezier(.65, 0, .3, 1) 3.4s infinite; }
@keyframes l3d-coroa-gira { 0%, 70% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.l3d-coroa img { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(calc(var(--k) * -1px * var(--prof))); pointer-events: none; }
.l3d-coroa img + img { filter: brightness(.62) saturate(1.25); }
.l3d-cintila {
  position: absolute; width: 4.6%; aspect-ratio: 1;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 244, 196, .9) 30%, transparent 62%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transform: translateZ(calc(var(--l) * .03)) scale(0);
  animation: l3d-cintila 2.8s ease-in-out infinite;
}
.l3d-cintila.c1 { left: 47%; top: -3%; animation-delay: 2.6s; }
.l3d-cintila.c2 { left: 59.5%; top: 3%; animation-delay: 3.5s; }
.l3d-cintila.c3 { left: 53%; top: -9%; animation-delay: 4.3s; }
@keyframes l3d-cintila { 0%, 70%, 100% { transform: translateZ(calc(var(--l) * .03)) scale(0) rotate(0); } 82% { transform: translateZ(calc(var(--l) * .03)) scale(1.25) rotate(45deg); } }

/* Faixa italiana: três blocos (verde, branco, vermelho) que desenrolam e depois ondulam em
   profundidade, um atrás do outro, com um reflexo de tecido passando.
   Um bloco por cor de propósito: com fatias 3D lado a lado o WebKit desenha a borda de cada
   camada e apareciam linhas verticais entre elas (e eram 36 camadas animadas no celular). */
.l3d-faixa {
  position: absolute; left: 6.47%; width: 90.57%; top: 85.6%; height: 14.4%;
  display: flex; gap: .45%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--l) * .014));
}
.l3d-cor {
  --bd: max(1px, calc(var(--l) * .0045));
  flex: 1; display: block;
  border: var(--bd) solid #d2ad4c; border-bottom-color: #a8822a;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(0, 0, 0, .28);
  background-repeat: no-repeat;
  background-size: 300% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  animation: l3d-desenrola .75s cubic-bezier(.2, 1, .3, 1) 1.05s backwards, l3d-onda 2.8s ease-in-out infinite, l3d-tecido 5.6s linear 2s infinite;
}
.l3d-cor.verde { background-color: #0d6e38; background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%), linear-gradient(180deg, #179150, #08582a); animation-delay: 1.05s, -1.87s, 2s; }
.l3d-cor.branco { background-color: #fff; background-image: linear-gradient(100deg, transparent 38%, rgba(201, 161, 59, .16) 50%, transparent 62%), linear-gradient(180deg, #ffffff, #e9e7df); animation-delay: 1.2s, -.93s, 2.93s; }
.l3d-cor.vermelho { background-color: #c0161a; background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%), linear-gradient(180deg, #e2261f, #a8100d); animation-delay: 1.35s, 0s, 3.87s; }
@keyframes l3d-onda {
  0%, 100% { transform: translate3d(0, -5%, calc(var(--l) * -.018)) rotateX(12deg); }
  50% { transform: translate3d(0, 5%, calc(var(--l) * .018)) rotateX(-12deg); }
}
/* Desenrola da esquerda para a direita (recorte, sem criar camadas extras) */
@keyframes l3d-desenrola {
  from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}
/* Reflexo que atravessa cada bloco, verde → branco → vermelho */
@keyframes l3d-tecido { 0% { background-position: 150% 0, 0 0; } 17%, 100% { background-position: -50% 0, 0 0; } }

/* Órbitas em volta da logo, uma de cada cor da marca */
.l3d-orbitas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; animation: l3d-precessao 34s linear infinite; }
@keyframes l3d-precessao { to { transform: rotateY(360deg); } }
.l3d-orbita {
  position: absolute;
  width: calc(var(--l) * 1.16); aspect-ratio: 1; left: calc(var(--l) * -.58); top: calc(var(--l) * -.58);
  border-radius: 50%;
  border: max(1.5px, calc(var(--l) * .0042)) solid;
  transform-style: preserve-3d;
  /* inclinação já no estilo base: com "reduzir movimento" (sem animação) a órbita não vira um anel de frente */
  transform: rotateY(var(--rot)) rotateX(var(--inc));
  animation: l3d-orbita-surge 1.4s cubic-bezier(.2, 1, .3, 1) both, l3d-orbita 16s linear infinite;
}
.l3d-orbita.ouro { --inc: 77deg; --rot: 0deg; color: #c9a13b; border-color: rgba(201, 161, 59, .55); animation-delay: 1.3s, 0s; animation-duration: 1.4s, 13s; }
.l3d-orbita.verde { --inc: 68deg; --rot: 28deg; color: #0b6b35; border-color: rgba(11, 107, 53, .36); animation-delay: 1.45s, -5s; animation-duration: 1.4s, 19s; animation-direction: normal, reverse; }
.l3d-orbita.vermelho { --inc: 84deg; --rot: -24deg; color: #c0161a; border-color: rgba(192, 22, 26, .36); animation-delay: 1.6s, -9s; animation-duration: 1.4s, 24s; }
@keyframes l3d-orbita {
  from { transform: rotateY(var(--rot)) rotateX(var(--inc)) rotateZ(0deg); }
  to { transform: rotateY(var(--rot)) rotateX(var(--inc)) rotateZ(360deg); }
}
@keyframes l3d-orbita-surge { from { opacity: 0; scale: .15; } }
.l3d-orbita i {
  position: absolute; left: 50%; top: 0;
  width: calc(var(--l) * .03); aspect-ratio: 1; margin: calc(var(--l) * -.015) 0 0 calc(var(--l) * -.015);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 12%, currentColor 62%);
  box-shadow: 0 0 calc(var(--l) * .03) calc(var(--l) * .006) currentColor;
}

@media (max-width: 640px) {
  .l3d-piso::before { --passo: 38px; }
}
/* Safari antigo (sem aspect-ratio): altura da logo calculada pela proporção 371 x 139 */
@supports not (aspect-ratio: 1) {
  .l3d-logo { height: calc(var(--l) * .3747); }
  .l3d-brilho { height: calc(var(--l) * 1.35); }
  .l3d-orbita { height: calc(var(--l) * 1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .l3d-particulas, .l3d-piso { display: none; }
}