/* Hipótese D · "O dia dela" — Grazi Affiune */
:root{
  /* paleta-base */
  --porcelana:#f8f5f2;
  --blusa:#fdfcfb;
  --estudio:#e9e7e6;
  --blush:#ecd3c8;
  --rosa-cha:#f3e1dc;
  --cereja:#b5142b;
  --cereja-claro:#e0566a;
  --cacau:#3a2420;
  --cafe:#1e1412;
  --noite:#2f2b36;

  /* valores vivos (o script troca conforme a hora do dia) */
  --c0:#f6eeea; --c1:#f3e1dc; --c2:#fbf8f5; --c3:#efd9d1; --c4:#f8efe9;
  --luz:#fffaf5; --sx:30%; --sy:40%;
  --ink:#3a2420; --ink-rgb:58 36 32;
  --fundo-rgb:246 238 234;
  --tinge:#f3d9cf; --tinge-a:.10;
  --doce:var(--cereja);

  /* tipo */
  --serifa:"Lustria", "Iowan Old Style", Georgia, serif;
  --sans:"Spline Sans", system-ui, sans-serif;
  --t-titulo:clamp(2.2rem, 1.2rem + 2.6vw, 3.55rem);
  --t-apoio:clamp(1.06rem, .98rem + .3vw, 1.22rem);
  --t-rotulo:.8rem;

  /* espaço */
  --margem:clamp(20px, 4.4vw, 72px);
  --nav-h:72px;
  --ease:cubic-bezier(.22,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--c0);
  color:rgb(var(--ink-rgb));
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}

/* granulado fixo */
body::after{
  content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .14  0 0 0 0 .12  0 0 0 1.4 -.25'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* ---------- navegação ---------- */
.nav{
  position:absolute;z-index:30;top:0;left:0;right:0;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--margem);
  transition:color .9s var(--ease);
}
.nav-marca{
  font-family:var(--serifa);font-size:1.12rem;letter-spacing:.01em;text-decoration:none;
  display:flex;align-items:baseline;gap:.6em;
}
.nav-marca span{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.nav-links{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center}
.nav-links a{
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:.5em 0;border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav-links a:hover,.nav-links a:focus-visible{border-color:currentColor}
.nav-agendar{border-bottom-color:rgb(var(--ink-rgb) / .45)!important}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:clip;
  height:100vh;height:100svh;min-height:600px;
  color:rgb(var(--ink-rgb));
}

/* céu em malha */
.ceu{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(in oklab circle at var(--sx) var(--sy), color-mix(in oklab, var(--luz) 70%, transparent) 0, transparent 30vmax),
    radial-gradient(in oklab ellipse 60% 55% at 12% 18%, var(--c1), transparent 72%),
    radial-gradient(in oklab ellipse 55% 65% at 92% 22%, var(--c3), transparent 70%),
    radial-gradient(in oklab ellipse 80% 55% at 48% 104%, var(--c4), transparent 72%),
    radial-gradient(in oklab ellipse 45% 45% at 70% 60%, var(--c2), transparent 75%),
    var(--c0);
}
.ceu::after{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(in oklab ellipse 32% 28% at 30% 40%, color-mix(in oklab, var(--c2) 60%, transparent), transparent 70%),
    radial-gradient(in oklab ellipse 30% 34% at 72% 70%, color-mix(in oklab, var(--c1) 55%, transparent), transparent 70%);
  animation:deriva 34s ease-in-out infinite alternate;
}
@keyframes deriva{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to{transform:translate3d(4%,3%,0) scale(1.06)}
}
/* luz mansa atrás dela (segura a borda do recorte também à noite) */
.halo{
  position:absolute;z-index:1;pointer-events:none;
  left:var(--rx-c,50%);top:var(--halo-y,45%);
  width:var(--halo-w,52vh);height:var(--halo-h,70vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(in oklab closest-side, color-mix(in oklab, var(--luz) var(--halo-forca,55%), transparent), transparent);
}

/* linha do dia */
.dia{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.arco-fio{stroke:rgb(var(--ink-rgb) / .16);stroke-width:.75}
.arco-ponto{stroke:rgb(var(--ink-rgb) / .5);stroke-width:1;stroke-dasharray:5 4;stroke-linecap:round}
.arco-feito{stroke:rgb(var(--ink-rgb) / .78);stroke-width:1.1;stroke-linecap:round}
.agua{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  fill:rgb(var(--ink-rgb) / .55);
}
.marcos circle{fill:var(--c0);stroke:rgb(var(--ink-rgb) / .55);stroke-width:1;transition:fill .6s, stroke .6s, r .6s}
.marcos circle.aceso{fill:rgb(var(--ink-rgb));stroke:rgb(var(--ink-rgb))}
.marcos circle.doce{stroke:var(--doce)}
.marcos circle.doce.aceso{fill:var(--doce);stroke:var(--doce)}
.sol{fill:#fffdfb;stroke:rgb(var(--ink-rgb) / .55);stroke-width:.8}
.sol-anel{fill:none;stroke:rgb(var(--ink-rgb) / .22);stroke-width:.7}

/* rótulos */
.rotulos{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:6;pointer-events:none}
.marco{
  position:absolute;left:0;top:0;
  font-size:var(--t-rotulo);line-height:1.35;letter-spacing:.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) translate(var(--hx,0),var(--vy,0));
  transition:opacity .9s var(--ease), color .9s var(--ease);
}
.marco .hora{font-weight:500;letter-spacing:.04em}
.marco small{
  display:block;font-size:.72rem;letter-spacing:.02em;opacity:.8;white-space:normal;max-width:24ch;
  max-height:0;overflow:hidden;transition:max-height .7s var(--ease), opacity .7s;
}
[data-modo="amplo"] .marco{opacity:.34}
.marco.passou{opacity:.66}
.e-noite .marco.passou{opacity:.8}
.marco.ativo{opacity:1}
.marco.ativo small,.marco.medindo small{max-height:2.4em}
.marco.sem-lugar{visibility:hidden}
[data-modo="medio"] .marco,[data-modo="celular"] .marco{
  padding:.42em .85em .45em;border-radius:14px;
  background:rgb(var(--veu-rgb,248 245 242) / .8);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgb(var(--ink-rgb) / .08);
}
.marco.oculto{opacity:0!important}
.marco-doce{color:var(--doce)}
.marco[data-alinha="dir"]{text-align:right}
.marco[data-alinha="meio"]{text-align:center}

/* retrato */
.retrato{
  position:absolute;z-index:4;margin:0;bottom:0;
  --rh:86vh;--rh:86svh;
  height:var(--rh);aspect-ratio:1364/2048;
  left:calc(50% - var(--rh) * .6660 * .46);
}
.retrato img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom}
.tinge{
  position:absolute;inset:0;pointer-events:none;
  background:var(--tinge);opacity:var(--tinge-a);mix-blend-mode:soft-light;
  -webkit-mask:url(../img/grazi-910.webp) center bottom / contain no-repeat;
          mask:url(../img/grazi-910.webp) center bottom / contain no-repeat;
}

/* textos */
.textos{display:contents}
.bloco{position:absolute;z-index:8}
.bloco-titulo{left:var(--margem);bottom:clamp(40px,8vh,90px);width:min(33vw,470px)}
.bloco-acao{right:var(--margem);bottom:clamp(40px,8vh,90px);width:min(22vw,330px)}
.sobre{
  margin:0 0 1.1rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.sobre span{font-weight:500}
h1{
  margin:0;font-family:var(--serifa);font-weight:400;font-size:var(--t-titulo);
  line-height:1.08;letter-spacing:-.012em;text-wrap:balance;
}
h1 span{display:block}
h1 .l2{margin-top:.12em}
.apoio{margin:0 0 1.5rem;font-size:var(--t-apoio);line-height:1.5;font-weight:400;text-wrap:pretty}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.3rem}
.botao{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.45em;border-radius:999px;text-decoration:none;
  font-size:.95rem;font-weight:500;letter-spacing:.01em;
  background:rgb(var(--ink-rgb));color:rgb(var(--fundo-rgb));
  transition:background .9s var(--ease), color .9s var(--ease), transform .3s var(--ease);
}
.botao svg{width:1.15em;height:1.15em}
.botao:hover{transform:translateY(-1px)}
.botao:focus-visible,.link-ig:focus-visible,.nav a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.link-ig{font-size:.9rem;text-decoration:none;border-bottom:1px solid rgb(var(--ink-rgb) / .35);padding-bottom:2px}
.provas{
  list-style:none;margin:1.4rem 0 0;padding:1rem 0 0;border-top:1px solid rgb(var(--ink-rgb) / .2);
  display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;font-size:.86rem;letter-spacing:.01em;
}
.estrela{font-size:.8em;margin-right:.15em}

/* ---------- laptop médio: ela à direita, arco atrás dela ---------- */
@media (max-width:1199px){
  .retrato{left:auto;right:3vw;--rh:88vh;--rh:88svh}
  :root{--t-titulo:clamp(2.4rem, 1rem + 3.4vw, 3.5rem)}
  .textos{
    display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,6vh,56px);
    position:absolute;z-index:8;left:var(--margem);top:var(--nav-h);bottom:4vh;width:min(44vw,500px);
  }
  .bloco{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}
}

/* ---------- celular e tablet em pé ---------- */
@media (max-width:899px), (orientation:portrait) and (max-width:1100px){
  :root{--nav-h:58px;--t-titulo:clamp(1.95rem, 1.2rem + 3.6vw, 2.9rem);--t-rotulo:.78rem}
  .nav-marca span{display:none}
  .nav-links a{font-size:.74rem;letter-spacing:.1em}
  .hero{--rhc:60svh;height:auto;min-height:100svh;padding-bottom:28px;display:flex;flex-direction:column}
  .retrato{
    position:relative;left:auto;right:auto;transform:none;bottom:auto;
    margin:var(--retrato-topo,76px) auto 0;--rh:var(--rhc);
    -webkit-mask:linear-gradient(#000 74%, transparent 99%);mask:linear-gradient(#000 74%, transparent 99%);
  }
  .textos{display:block;position:static;width:auto}
  .bloco{position:relative;left:auto;right:auto;bottom:auto;top:auto;width:auto;padding:0 22px}
  .bloco-titulo{margin-top:calc(var(--rhc) * -.2)}
  .link-ig{display:none}
  .bloco-acao{margin-top:1rem}
  .sobre{margin-bottom:.7rem;font-size:.72rem}
  .apoio{margin-bottom:1.1rem}
  .provas{margin-top:1.1rem;padding-top:.8rem;font-size:.82rem}
  .bloco-titulo::before{
    content:"";position:absolute;z-index:-1;left:0;right:0;top:-70px;height:calc(100% + 70px + 60svh);
    background:linear-gradient(rgb(var(--veu-rgb,248 245 242) / 0), rgb(var(--veu-rgb,248 245 242) / .9) 150px);
  }
}
@media (max-width:899px) and (min-width:600px), (orientation:portrait) and (min-width:600px) and (max-width:1100px){
  .bloco{padding:0 8vw}
  .hero{--rhc:66svh}
}
@media (max-width:380px){
  .nav-links a:not(.nav-agendar){display:none}
  :root{--t-titulo:1.86rem}
  .nav-links{gap:14px}
  .botao{padding:.9em 1.2em}
}

/* ---------- entrada (só com JS) ---------- */
.js .hero .retrato{opacity:0;translate:0 14px;transition:opacity 1.3s var(--ease), translate 1.6s var(--ease)}
.js .hero .sobre,.js .hero h1 span,.js .hero .apoio,.js .hero .acoes,.js .hero .provas,.js .nav{
  opacity:0;translate:0 10px;transition:opacity 1s var(--ease), translate 1.2s var(--ease)
}
.js .hero.entrou .retrato,
.js .hero.entrou .sobre,.js .hero.entrou h1 span,.js .hero.entrou .apoio,.js .hero.entrou .acoes,.js .hero.entrou .provas,
.js.entrou-nav .nav{opacity:1;translate:none}
.js .hero.entrou .retrato{transition-delay:.1s}
.js .hero.entrou .sobre{transition-delay:.35s}
.js .hero.entrou h1 .l1{transition-delay:.5s}
.js .hero.entrou h1 .l2{transition-delay:.85s}
.js .hero.entrou .apoio{transition-delay:1.1s}
.js .hero.entrou .acoes{transition-delay:1.3s}
.js .hero.entrou .provas{transition-delay:1.5s}
.js .ceu::after{animation:deriva 34s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .hero .retrato,.js .hero .sobre,.js .hero h1 span,.js .hero .apoio,.js .hero .acoes,.js .hero .provas,.js .nav{opacity:1;translate:none}
}