/* ============================================================================
   HERO — Moeda de Terra Calda
   A moeda éntrase por pezas: primeiro o disco, despois constrúese a peineta
   (barra, cúpulas e púas) e ao final escríbese o texto letra a letra.

   A xerarquía de transforms está repartida a propósito:
     .tc-moeda-escena   -> perspectiva, non se move nunca
     .tc-moeda-punteiro -> escríbea o JS co xiro cara ao rato
     .tc-moeda-balanceo -> balanceo 3D continuo, sen rato
     .tc-logo           -> entrada inicial
   Se todo estivese no mesmo elemento, cada capa pisaría a anterior.
   ========================================================================== */

.tc-moeda-escena {
    width: clamp(200px, 25vw, 350px);
    aspect-ratio: 1;
    margin-inline: auto;
    perspective: 820px;
    perspective-origin: 50% 45%;
}

.tc-moeda-punteiro {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* O JS actualiza estas dúas; a transición só actúa ao soltar o rato. */
    --tc-rx: 0deg;
    --tc-ry: 0deg;
    transform: rotateX(var(--tc-rx)) rotateY(var(--tc-ry));
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.tc-moeda-punteiro.tc-seguindo {
    /* Mentres o rato está enriba non hai transición: se non, o xiro vai
       sempre medio segundo por detrás do punteiro e nótase pastoso. */
    transition: none;
}

/* ------------------------------------------------------ balanceo continuo */
/* Ten que verse sen tocar nada. A amplitude anterior (2-3 graos) pasaba
   desapercibida e parecía que só se movía co rato. */
.tc-moeda-balanceo {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: tc-balanceo 11s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes tc-balanceo {
      0% { transform: rotateX(  7.5deg) rotateY(-10deg) translate3d(0, 0, 0); }
     18% { transform: rotateX(  1deg)   rotateY( -3deg) translate3d(0, -9px, 14px); }
     36% { transform: rotateX( -6deg)   rotateY(  8deg) translate3d(0, -4px, 6px); }
     54% { transform: rotateX( -7.5deg) rotateY( 10.5deg) translate3d(0, 3px, -8px); }
     72% { transform: rotateX( -1deg)   rotateY(  2deg) translate3d(0, -7px, 10px); }
     88% { transform: rotateX(  5deg)   rotateY( -7deg) translate3d(0, -2px, 4px); }
    100% { transform: rotateX(  7.5deg) rotateY(-10deg) translate3d(0, 0, 0); }
}

.tc-logo {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55));
    transition: filter .45s ease;
}
.tc-moeda-escena:hover .tc-logo {
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .6))
            drop-shadow(0 0 22px rgba(195, 159, 23, .35));
}

/* --------------------------------------------------------------- brillo */
/* Dúas cousas que daban problema e xa non están:
   1. mix-blend-mode dentro dun contexto preserve-3d. O div e o SVG quedaban
      coplanarios e Chrome debuxaba a liña onde se cruzaban.
   2. Mover o reflexo con background-position sobre un background-size do
      165 %. A imaxe do degradado é un rectángulo; alí onde remataba, e con
      no-repeat, quedaba un bordo recto en diagonal. Ese era o corte.
   Agora a posición vai dentro da función, o degradado enche o elemento
   enteiro e o que se anima son as dúas variables. */
@property --tc-bx { syntax: '<percentage>'; initial-value: 26%; inherits: false; }
@property --tc-by { syntax: '<percentage>'; initial-value: 22%; inherits: false; }

.tc-brillo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    /* Separado uns milímetros en Z para non quedar no mesmo plano que o SVG. */
    transform: translateZ(3px);
    opacity: .5;
    transition: opacity .35s ease;
    background: radial-gradient(ellipse 66% 66% at var(--tc-bx) var(--tc-by),
                rgba(255, 255, 255, .78) 0%,
                rgba(255, 255, 255, .30) 30%,
                rgba(255, 255, 255, .08) 52%,
                /* rgba(...,0) e non "transparent": algúns motores interpolan
                   transparent cara a negro e sae unha banda grisácea. */
                rgba(255, 255, 255, 0)   76%);
    animation: tc-lustre 11s cubic-bezier(.45, 0, .55, 1) infinite;
}
.tc-moeda-escena:hover .tc-brillo { opacity: .8; }
.tc-moeda-punteiro.tc-seguindo .tc-brillo { animation-play-state: paused; }

/* O reflexo pasea só, sen que faga falta o rato. */
@keyframes tc-lustre {
      0% { --tc-bx: 24%; --tc-by: 20%; }
     30% { --tc-bx: 64%; --tc-by: 30%; }
     52% { --tc-bx: 76%; --tc-by: 60%; }
     74% { --tc-bx: 42%; --tc-by: 40%; }
    100% { --tc-bx: 24%; --tc-by: 20%; }
}

/* ============================================================================
   ENTRADA
   Todo parte oculto e dispárao .tc-entrar, que engade o JS cando o SVG xa
   está no DOM. O <noscript> do index deixa todo visible se non hai JS.
   ========================================================================== */
.tc-logo .tc-moeda,
.tc-logo .tc-marca,
.tc-logo .tc-texto { opacity: 0; }

/* transform-box: fill-box fai que transform-origin se calcule sobre a caixa
   de cada trazo e non sobre todo o lenzo do SVG. Sen isto, escalar unha púa
   movíaa ao centro do logo. */
.tc-logo .tc-barra,
.tc-logo .tc-cupula,
.tc-logo .tc-pua,
.tc-logo .tc-letra {
    transform-box: fill-box;
}

/* ---- 1. O disco chega xirando, como unha moeda que se pousa ---- */
.tc-entrar .tc-moeda {
    animation: tc-entra-disco 1.05s cubic-bezier(.16, 1, .3, 1) both;
    transform-origin: 50% 50%;
}
@keyframes tc-entra-disco {
    from { opacity: 0; transform: rotateY(-108deg) scale(.72); }
     55% { opacity: 1; }
      to { opacity: 1; transform: rotateY(0) scale(1); }
}

/* ---- 2. A peineta constrúese: barra, cúpulas e púas ---- */
.tc-entrar .tc-marca { opacity: 1; }

/* A barra tráza se do centro cara a fóra. */
.tc-entrar .tc-barra {
    transform-origin: 50% 50%;
    animation: tc-traza-barra .5s cubic-bezier(.65, 0, .35, 1) .62s both;
}
@keyframes tc-traza-barra {
    from { transform: scaleX(0); opacity: 0; }
      to { transform: scaleX(1); opacity: 1; }
}

/* As tres cúpulas medran cara a arriba desde a barra. */
.tc-entrar .tc-cupula {
    transform-origin: 50% 100%;
    animation: tc-medra-cupula .46s cubic-bezier(.34, 1.5, .64, 1) both;
    animation-delay: calc(1s + var(--i) * .075s);
}
@keyframes tc-medra-cupula {
    from { transform: scaleY(0); opacity: 0; }
      to { transform: scaleY(1); opacity: 1; }
}

/* As once púas baixan unha tras outra, de esquerda a dereita. */
.tc-entrar .tc-pua {
    transform-origin: 50% 0%;
    animation: tc-baixa-pua .34s cubic-bezier(.33, 1.3, .6, 1) both;
    animation-delay: calc(1.22s + var(--i) * .042s);
}
@keyframes tc-baixa-pua {
    from { transform: scaleY(0); opacity: .35; }
      to { transform: scaleY(1); opacity: 1; }
}

/* ---- 3. O texto escríbese letra a letra ---- */
.tc-entrar .tc-texto { opacity: 1; }
.tc-entrar .tc-letra {
    transform-origin: 50% 90%;
    animation: tc-escribe .42s cubic-bezier(.2, 1.1, .4, 1) both;
    animation-delay: calc(1.78s + var(--i) * .062s);
}
@keyframes tc-escribe {
    from { opacity: 0; transform: translateY(9px) scale(.7) rotate(-7deg); }
     70% { opacity: 1; }
      to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* ---- 4. Un brillo cruza a moeda ao rematar, como un lustre final ---- */
.tc-entrar .tc-brillo {
    animation: tc-cruza 1.15s cubic-bezier(.4, 0, .3, 1) 2.35s 1,
               tc-lustre 11s cubic-bezier(.45, 0, .55, 1) 3.5s infinite;
}
@keyframes tc-cruza {
    from { --tc-bx: -14%; --tc-by: 116%; opacity: .5; }
     45% { opacity: .95; }
      to { --tc-bx:  24%; --tc-by:  20%; opacity: .5; }
}

/* ----------------------------------------------------- sobre o movemento */
/* Aquí NON hai bloque @media (prefers-reduced-motion: reduce), e é a
   propósito. Moita xente ten desactivadas as animacións de Windows sen sabelo
   (Configuración > Accesibilidade > Efectos visuais), Chrome tradúceo a
   prefers-reduced-motion e o logo quedaba completamente inerte sen que o
   usuario entendese por que. Se algún día se quixese respectar o axuste, o
   bloque iría aquí. */