/* ==========================================================================
   Seção: HERO (#inicio)
   Uma composição centrada: faixa dos olhos (mangá) dentro de uma moldura
   dupla deslocada → "ICARO" em Mincho com selo hanko → 彫師 · TATTOO ARTIST
   → botão "Agendar sessão". Nos cantos de baixo (desktop): prêmio à esquerda,
   seta "role para baixo" à direita.
   ========================================================================== */

.hero{
  min-height:100vh;
  min-height:100svh;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  padding:calc(var(--nav-h) + 12px) 16px clamp(28px,6vh,64px);
  position:relative;               /* referência da seta "role para baixo" */
}

/* Largura limitada também pela altura, para o hero inteiro caber
   sem rolagem num notebook de 1019×640. */
.composition{
  width:min(100%,1120px,calc((100vh - var(--nav-h)) * 1.55));
  width:min(100%,1120px,calc((100svh - var(--nav-h)) * 1.55));
  display:grid;
  justify-items:center;
  gap:clamp(22px,3.4vw,46px);
}

.composition > .book-wrap{margin-top:clamp(0px,.6vw,8px)}


/* ==========================================================================
   Faixa dos olhos
   .stage usa as coordenadas das plates (1536×600); .window recorta a faixa.
   Pilha (de baixo para cima):
     layer-a: iris-base → iris_rotor (gira) → iris_rim → plate_a (íris vazada) → shade_a
     layer-b: mesma pilha com plate_b/shade_b   (só com data-frame="b")
     plate-c                                    (só com data-frame="c")
   NÃO usar mask-image: a íris aparece pelos furos transparentes das plates.
   ========================================================================== */

.panel{position:relative;width:100%}

.window{
  position:relative;
  z-index:2;
  width:100%;
  aspect-ratio:1536/409;
  overflow:hidden;
  background:var(--void);
}

.stage{
  position:absolute;
  left:0;top:50%;
  width:100%;
  aspect-ratio:1536/600;
  transform:translateY(-50%);
}
.stage img{
  position:absolute;
  display:block;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.stage .layer{position:absolute;inset:0}   /* escopado: a seção Sobre também usa .layer */
.plate,.shade{inset:0;width:100%;height:100%}

/* ---------- íris ---------- */
.iris{position:absolute;aspect-ratio:1}
.iris img{inset:0;width:100%;height:100%}

/* disco vermelho liso por baixo: segurança caso o rotor não carregue */
.iris-base{position:absolute;aspect-ratio:1;border-radius:50%;background:var(--sharingan)}

/* --rot é atualizado por frame no #stage (js/sections/hero.js) */
.iris .rot{transform:rotate(var(--rot,0deg));will-change:transform}
.iris.r .rot{transform:rotate(calc(var(--rot,0deg) + 25deg))}   /* defasagem do olho direito */

/* Posições em % do stage, MEDIDAS NA ARTE. O rotor é centrado na pupila
   desenhada, não no centro do círculo da íris.
   Pupila esq. (307,5; 485,4) r≈101 · pupila dir. (1297,7; 487,4) r≈95,6
   (coordenadas da arte original 1536×1024). Trocou a arte → medir de novo. */
.rot-l{left:12.7209%;top:36.3823%;width:14.5972%}
.rim-l{left:13.3984%;top:35.4667%;width:13.4766%}
.rot-r{left:77.8701%;top:38.4642%;width:13.2311%}
.rim-r{left:77.9102%;top:37.6667%;width:12.7734%}

/* ---------- frames da piscada: A sempre por baixo, B e C por cima ---------- */
.layer-b,.plate-c{visibility:hidden}
.stage[data-frame="b"] .layer-b,
.stage[data-frame="c"] .plate-c{visibility:visible}

/* ---------- moldura dupla deslocada (vetor CSS) ---------- */
.frame{position:absolute;inset:calc(var(--line) * -1);pointer-events:none}
.frame--front{z-index:3}
.frame--back{z-index:1;transform:translate(var(--off),var(--off))}

.frame i{position:absolute;background:var(--frame)}
.frame--back i{background:var(--frame-back)}

.frame .t,.frame .b{left:0;right:0;height:var(--line)}
.frame .l,.frame .r{top:0;bottom:0;width:var(--line)}
/* origens em sentido horário: cada linha "nasce" de onde a anterior terminou */
.frame .t{top:0;transform-origin:left}
.frame .r{right:0;transform-origin:top}
.frame .b{bottom:0;transform-origin:right}
.frame .l{left:0;transform-origin:bottom}


/* ==========================================================================
   Nome + selo + função
   ========================================================================== */

.title{display:grid;justify-items:center;gap:clamp(12px,1.8vw,22px)}

.name{
  margin:0;
  position:relative;
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(40px,min(7.2vw,11vh),100px);
  line-height:.9;
  color:var(--ink);
  letter-spacing:.42em;
  padding-left:.42em;          /* equilibra o tracking da última letra */
  font-kerning:none;
  white-space:nowrap;
}
.name .ch{display:inline-block}

/* selo hanko イカロ */
.seal{
  position:absolute;
  left:calc(100% - .2em);
  top:.01em;
  display:grid;
  place-items:center;
  width:.5em;height:.82em;
  background:var(--seal);
  border-radius:.04em;
  transform:rotate(-3deg);
  box-shadow:inset 0 0 0 .02em rgba(255,255,255,.28);
  letter-spacing:0;
}
.seal span{
  writing-mode:vertical-rl;
  font-size:.19em;
  line-height:1;
  color:#f4eee8;
  letter-spacing:.06em;
}

/* 彫師 · TATTOO ARTIST */
.role{
  margin:0;
  display:flex;
  align-items:center;
  gap:clamp(10px,1.4vw,18px);
  color:var(--ink-soft);
  font-size:clamp(10px,1vw,12.5px);
  text-transform:uppercase;
  letter-spacing:.5em;
}
.role .rule{width:clamp(28px,5vw,72px);height:1px;background:var(--rule)}
.role .jp{font-family:var(--f-display);font-weight:800;color:var(--sharingan);letter-spacing:.12em;font-size:1.25em}
.role .txt{margin-right:-.5em}


/* ==========================================================================
   Entrada (uma vez) — encurtada a pedido do Victor (antes ~4,9s, agora ~2,6s)
   0,2s navbar · 0,05–1s molduras · 0,45s faixa (olhos fechados) · 1,1s abre + giro
   1,2s ICARO (0,07s/letra) · 1,6s selo · 1,75s 彫師 · 1,9s botão · 2,2s seta "role"
   ========================================================================== */

/* estado escondido */
.intro .frame .t,.intro .frame .b{transform:scaleX(0)}
.intro .frame .l,.intro .frame .r{transform:scaleY(0)}
.intro .stage{opacity:0}
.intro .name .ch{opacity:0;transform:translateY(.12em)}
.intro .seal{opacity:0;transform:rotate(-3deg) scale(1.6)}
.intro .role{opacity:0}
.intro .hero .book-wrap{opacity:0;transform:translateY(10px)}
.intro .rolar{opacity:0}
.intro .premio-hero{opacity:0}

/* transições */
.play .frame i{transition:transform .32s cubic-bezier(.7,0,.2,1)}
.play .frame .t{transition-delay:.05s}
.play .frame .r{transition-delay:.22s}
.play .frame .b{transition-delay:.34s}
.play .frame .l{transition-delay:.52s}
.play .frame--back .t{transition-delay:.2s}
.play .frame--back .r{transition-delay:.37s}
.play .frame--back .b{transition-delay:.48s}
.play .frame--back .l{transition-delay:.66s}

.play .stage{transition:opacity .6s ease-out .45s}
.play .name .ch{
  transition:opacity .5s ease-out,transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(1.2s + var(--i) * .07s);
}
.play .seal{transition:opacity .12s linear 1.6s,transform .28s cubic-bezier(.3,1.6,.5,1) 1.6s}
.play .role{transition:opacity .6s ease-out 1.75s}
.play .hero .book-wrap{transition:opacity .7s ease-out 1.9s,transform .8s cubic-bezier(.2,.8,.2,1) 1.9s}
.play .rolar{transition:opacity .6s ease-out 2.2s}
.play .premio-hero{transition:opacity .7s ease-out 2.05s}


/* ==========================================================================
   Prêmio: "1º lugar no Tattoo Week · Categoria Whip Shading"
   Sutil, na língua do selo イカロ: um hanko vermelho 一位 ("primeiro lugar", o
   mesmo selo do prêmio no Sobre) e duas linhas pequenas.
   Desktop: canto inferior esquerdo, fora do fluxo (espelha a seta do canto
   direito e não mexe no enquadramento do hero no 1019×640).
   Celular: centralizado abaixo do botão.
   Fontes: 一位 e a linha serifada usam a Shippori Mincho B1 700 já carregada
   pelo Sobre (o subset do hero só tem as letras de ICARO); a legenda, a Zen Kaku.
   ========================================================================== */
.premio-hero{
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
}
.premio-hero__selo{
  flex:none;
  writing-mode:vertical-rl;
  padding:6px 4px;
  background:var(--seal);
  color:#f4eee8;
  font:700 12px/1 "Shippori Premio","Shippori Mincho B1",var(--f-display);   /* Premio: recorte só do prêmio (fonts.css) */
  letter-spacing:.08em;
  border-radius:2px;
  transform:rotate(-3deg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.premio-hero__txt{display:grid;gap:6px;text-align:left}
.premio-hero__linha{
  font:700 13px/1.1 "Shippori Premio","Shippori Mincho B1",var(--f-display);
  letter-spacing:.04em;
  color:color-mix(in srgb,var(--ink-hi) 82%,transparent);
}
.premio-hero__cat{
  font:500 9.5px/1 var(--f-ui);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
@media (min-width:861px){
  .premio-hero{position:absolute;left:clamp(16px,3.2vw,48px);bottom:clamp(16px,3vh,32px)}
}


/* ==========================================================================
   Seta "Role para baixo"
   Avisa que há mais seções (pedido do Victor). Aparece no fim da entrada,
   balança devagar sozinha e some quando a página rola (js/sections/hero.js).
   É um link para #sobre, então funciona também sem JS.
   Celular: centralizada embaixo. Desktop: canto inferior direito (no 1019×640
   o botão "Agendar sessão" ocupa o centro de baixo).
   ========================================================================== */
.rolar{
  position:absolute;
  left:50%;
  bottom:max(14px, env(safe-area-inset-bottom, 0px));
  translate:-50% 0;
  display:grid;
  justify-items:center;
  gap:8px;
  padding:6px 6px 0 calc(6px + .32em);  /* compensa o tracking da última letra */
  color:var(--ink-soft);
  font:500 10px/1 var(--f-ui);
  letter-spacing:.32em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:opacity .4s ease, color .25s;
}
.rolar:hover{color:var(--ink-hi)}
.rolar:focus-visible{outline:1px solid var(--ink-hi);outline-offset:6px}
.rolar__seta{display:block;width:14px;height:20px;color:var(--sharingan);animation:rolar-seta 1.8s ease-in-out infinite}
@keyframes rolar-seta{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(5px);opacity:1}
}
.rolar.is-oculto{opacity:0;pointer-events:none}
@media (min-width:861px){
  .rolar{left:auto;right:clamp(16px,3.2vw,48px);translate:none;bottom:clamp(16px,3vh,32px)}
}
@media (prefers-reduced-motion:reduce){
  .rolar__seta{animation:none}
}


/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width:600px){
  .window{aspect-ratio:1536/560}
  .name{letter-spacing:.3em;padding-left:.3em}
  .seal{left:calc(100% - .12em)}
  .role{letter-spacing:.38em}
}