/* ===========================================================
   HERO SECTION — mobile-first
   =========================================================== */

*{margin:0;padding:0;box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font);
  overflow-x:hidden;
}

img{display:block;max-width:100%;}

/* A navbar full-width minimalista mora em styles/nav.css */

/* -----------------------------------------------------------
   HERO — shell
   ----------------------------------------------------------- */
.hero{
  /* "rabo" de preto depois do rodapé: a hero passa um pouco da dobra e o
     rodapé desce junto, então ©2026 / CREATING ficam no mesmo lugar na tela
     mas deixam de encostar no fim do fundo.
     O padding-bottom compensa o tail pra headline continuar centralizada
     na viewport (centro do content box = 50svh). */
  --hero-tail:48px;

  position:relative;
  min-height:calc(100svh + var(--hero-tail));
  display:flex;
  flex-direction:column;
  justify-content:center;      /* headline centralizada verticalmente */
  padding:110px 20px calc(92px + var(--hero-tail));
}

/* -----------------------------------------------------------
   TÍTULO + ÍCONES 3D
   ----------------------------------------------------------- */
/* width:fit-content faz o bloco abraçar o texto — assim os ícones 3D,
   posicionados por left/right, encostam nas bordas do título e não da tela */
.hero__headline{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}

.hero__title{
  /* 9.3vw: calibrado pra linha mais longa ("WEB DESIGNER") ocupar ~72% da
     largura, deixando a moldura de respiro da referência.
     O limite em vh evita que o título colida com o badge em telas baixas. */
  font-size:clamp(40px,min(9.3vw,19vh),174px);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:.9;
  text-transform:uppercase;
  text-align:center;
  color:var(--cream);
}

.hero__title span{display:block;}

/* -----------------------------------------------------------
   BALÃO DE FALA — acima do título
   Três camadas por um motivo: cada uma carrega UM transform, e
   transforms não se somam numa propriedade só.
     .hero__bubble        → posição (fica acima da borda de cima do título)
     .hero__bubble__float → balanço idle infinito
     .hero__bubble__body  → pop de entrada (uma vez) + o visual
   ----------------------------------------------------------- */
.hero__bubble{
  position:absolute;
  bottom:100%;                 /* ancora logo acima da borda de cima do título */
  left:19%;                    /* perto da estrela, mas com o texto livre dela */
  width:max-content;           /* abraça o texto em vez de esticar na largura do título */
  margin-bottom:clamp(4px,1.4vh,18px);
  z-index:6;                   /* acima da estrela (z:2), pro texto nunca ficar coberto */
  pointer-events:none;         /* decorativo, não rouba clique do título */
}

.hero__bubble__float{
  animation:bubble-float 6s ease-in-out infinite;
}

@keyframes bubble-float{
  0%,100%{translate:0 0;      rotate:-3deg;}
  50%    {translate:0 -6px;   rotate:-1.5deg;}
}

.hero__bubble__body{
  position:relative;
  white-space:nowrap;
  font-size:clamp(13px,1.5vw,18px);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--cream);
  padding:10px 18px;
  border-radius:14px;

  /* vidro escuro, igual à navbar */
  background:linear-gradient(
    150deg,
    rgba(10,4,4,.82),
    rgba(0,0,0,.7) 55%,
    rgba(18,7,6,.78)
  );
  backdrop-filter:blur(12px) saturate(120%) brightness(.8);
  -webkit-backdrop-filter:blur(12px) saturate(120%) brightness(.8);
  box-shadow:
    inset 0 1px 0 rgba(250,247,243,.06),
    0 12px 30px rgba(0,0,0,.55);

  /* pop de entrada; nasce pausado e o reveal.js solta (é um .fx? não —
     este dispara sozinho com delay, junto do resto da hero) */
  transform-origin:22% 100%;   /* cresce a partir da base, perto do rabinho */
  opacity:0;
  animation:bubble-pop .7s var(--spring) 1.15s forwards;
}

/* aresta metálica vermelha — mesmo anel mascarado da navbar */
.hero__bubble__body::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--red-metal);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* rabinho: quadradinho girado saindo da base esquerda, apontando pro título */
.hero__bubble__body::after{
  content:"";
  position:absolute;
  left:22%;
  bottom:-5px;
  width:12px;
  height:12px;
  background:rgba(6,2,2,.9);
  border-right:1px solid var(--red-deep);
  border-bottom:1px solid var(--red-deep);
  transform:translateX(-50%) rotate(45deg);
}

@keyframes bubble-pop{
  0%  {opacity:0; scale:.6;  translate:0 8px;  filter:blur(6px);}
  60% {opacity:1; scale:1.06;translate:0 -2px; filter:blur(0);}
  100%{opacity:1; scale:1;   translate:0 0;    filter:blur(0);}
}

@media (prefers-reduced-motion:reduce){
  .hero__bubble__float{animation:none;}
  .hero__bubble__body{animation:none;opacity:1;scale:1;translate:0;filter:none;}
}

.hero__icon{
  position:absolute;
  width:clamp(72px,9.5vw,148px);
  pointer-events:none;
  user-select:none;
  z-index:2;
}

/* estrela — sobrepõe o canto superior esquerdo do título */
.hero__icon--star{
  top:0;
  left:0;
  transform:translate(-34%,-48%) rotate(-12deg);
}

/* raio — canto inferior direito do bloco de título */
.hero__icon--bolt{
  bottom:0;
  right:0;
  transform:translate(30%,38%) rotate(12deg);
}

/* -----------------------------------------------------------
   SLOT DO CARD NA HERO
   Caixa invisível que só define ONDE e DE QUE TAMANHO o card
   começa. Quem desenha é #morphCard (styles/morph.css), que é
   position:fixed e persegue este slot.
   ----------------------------------------------------------- */
.hero__scroll{
  display:block;
  width:clamp(150px,38vw,196px);
  aspect-ratio:5/6;            /* retângulo vertical, não quadrado */
  margin:32px auto 0;
  z-index:3;
  visibility:hidden;           /* só geometria; o visual é do #morphCard */
}

.scroll-badge{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.scroll-badge__ring{
  fill:none;
  stroke:var(--cream-30);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}

/* O texto em português é ~15% mais longo que o original em inglês, e a
   circunferência é fixa. O tracking foi reduzido de .22em pra .12em pra o
   selo continuar fechando a volta sem as pontas se atropelarem. */
.scroll-badge__text text{
  fill:var(--cream-90);
  font-family:var(--font);
  font-size:15px;
  font-weight:600;
  letter-spacing:.12em;
}

/* anel de texto girando devagar */
.scroll-badge__text{
  transform-origin:100px 100px;
  animation:badge-spin 34s linear infinite;
}

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

.scroll-badge__arrow{
  fill:none;
  stroke:var(--cream);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;

  /* pulso lento pra baixo */
  transform-origin:100px 100px;
  animation:arrow-pulse 3.2s ease-in-out infinite;
}

@keyframes arrow-pulse{
  0%,100%{transform:translateY(-4px);opacity:.55;}
  50%    {transform:translateY(5px); opacity:1;}
}

/* -----------------------------------------------------------
   RODAPÉ DA HERO — fixo na base
   ----------------------------------------------------------- */
.hero__meta{
  position:absolute;
  left:20px;
  right:20px;
  bottom:calc(32px + var(--hero-tail));
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  z-index:4;
}

.hero__year{
  font-size:clamp(30px,4.2vw,64px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--cream-50);
}

.hero__since{
  font-size:clamp(10px,1vw,15px);
  font-weight:400;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--cream-50);
  text-align:right;
  padding-bottom:4px;
}

/* -----------------------------------------------------------
   BREAKPOINTS
   ----------------------------------------------------------- */
@media (min-width:768px){
  /* padding simétrico: foto e rodapé são absolutos, então o título
     fica centralizado no meio real da viewport */
  .hero{padding:80px 40px calc(80px + var(--hero-tail));}

  /* o badge sai do fluxo e encosta na base da hero.
     altura em vh (não largura em px) pra manter a folga em relação
     ao título em telas baixas */
  .hero__scroll{
    position:absolute;
    left:50%;
    bottom:calc(34px + var(--hero-tail));
    margin:0;
    width:auto;
    height:clamp(148px,24vh,205px);
    transform:translateX(-50%);
  }


  .hero__meta{left:40px;right:40px;bottom:calc(52px + var(--hero-tail));}
}

@media (min-width:1024px){
  .hero{padding:80px 5vw calc(80px + var(--hero-tail));}
  .hero__meta{left:5vw;right:5vw;}
  .hero__icon--star{transform:translate(-52%,-54%) rotate(-12deg);}
  .hero__icon--bolt{transform:translate(52%,42%) rotate(12deg);}
}

/* Ícones: entrada em opacidade + flutuação contínua.
   A posição deles mora no `transform` (e muda por breakpoint), então a
   flutuação usa as propriedades INDIVIDUAIS `translate` e `rotate` —
   elas são aplicadas antes do `transform` e se compõem com ele, em vez
   de sobrescrever. Assim a mesma keyframe serve pros dois ícones em
   qualquer breakpoint, sem repetir a posição dentro da animação.
   Os dois entram JUNTOS com o rodapé (mesmo --i); só a flutuação é que
   tem tempos distintos. */
.hero__icon.fx{
  animation-name:fx-in-soft, icon-float;
  animation-duration:var(--fx-dur), 7.5s;
  animation-timing-function:var(--spring), ease-in-out;
  animation-fill-mode:both, none;
  animation-iteration-count:1, infinite;
}

/* durações e atrasos diferentes: sincronizados eles pareceriam um par
   de peças da mesma engrenagem, e não dois objetos soltos no espaço */
.hero__icon--star.fx{
  animation-delay:calc(var(--i,0) * var(--fx-step)), 1.2s;
  animation-duration:var(--fx-dur), 7.5s;
}

.hero__icon--bolt.fx{
  animation-delay:calc(var(--i,0) * var(--fx-step)), 0s;
  animation-duration:var(--fx-dur), 9.2s;
}

@keyframes icon-float{
  0%   {translate:0 0;      rotate:0deg;}
  30%  {translate:2px -9px; rotate:2.6deg;}
  55%  {translate:-3px -3px;rotate:-1.4deg;}
  78%  {translate:1px 6px;  rotate:-2.8deg;}
  100% {translate:0 0;      rotate:0deg;}
}

@media (prefers-reduced-motion:reduce){
  /* mantém o transform de posição; zera só a flutuação */
  .hero__icon.fx{animation:none;opacity:1;filter:none;translate:none;rotate:none;}
  .scroll-badge__text,.scroll-badge__arrow{animation:none;}
  .scroll-badge__arrow{opacity:1;transform:none;}
}