/* ==========================================================================
   main.css — theme variables, reset, global styles, hero/grid layout base
   ========================================================================== */

:root{
  --bg: #120c1e;                  /* base color (shown if the background image fails to load) —
                                      dark indigo instead of flat black. Overwritten at runtime by
                                      theme-color.js once the photo loads (see below). */
  --text: #c9d1d9;                /* main text color */
  --text-dim: #8b949e;            /* secondary text color (tagline, footer) */
  --heading: #e6edf3;             /* heading color */
  --border: #30363d;              /* subtle borders / dividers */
  --link: #2a8af7;                /* links and highlights — overwritten at runtime by
                                      theme-color.js, sampled from the background photo. */
  --card-bg: rgba(13,17,23,.82);  /* panel color + opacity — also overwritten at runtime. */

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: 'Playfair Display', serif;

  --content-width: min(1120px, 92vw);
}

*{ box-sizing:border-box; }

html{
  height:100%;
  /* Fluid root size: the whole page scales off this single value. Slightly
     larger range than before (13–17px vs 13–16px) since the layout now
     fills more of a wide screen instead of sitting in a narrow column, so
     body text can afford to be a touch bigger on large viewports. */
  font-size: clamp(13px, 0.75vw + 11.5px, 17px);
}

body{
  height:100%;
  margin:0;
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.55;
  min-height:100vh;

  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 5rem 4vw 3rem;

  background-color: var(--bg);
  position:relative;
}

/* Background photo lives on its own fixed layer (not directly on body) so
   it can be transform-animated without touching body's flex layout. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: bg-breathe 26s ease-in-out infinite alternate;
}
@keyframes bg-breathe{
  from{ transform: scale(1); }
  to{ transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
}

/* Ambient glow — two large, very soft blobs in the dynamic accent color,
   drifting almost imperceptibly. Sits on top of the background photo
   (paints after body::before by default pseudo-element order) to tie the
   photo and the accent system together, or serves as the whole
   background's atmosphere on its own when there's no bg.jpg yet. This is
   the "glow/gradient ambiente muito discreto" — deliberately not a neon
   wash, opacity stays low. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 12% 18%, color-mix(in srgb, var(--link) 38%, transparent), transparent 62%),
    radial-gradient(ellipse 50% 42% at 88% 82%, color-mix(in srgb, var(--link) 26%, transparent), transparent 65%);
  opacity:.45;
  animation: ambient-drift 55s ease-in-out infinite alternate;
}
@keyframes ambient-drift{
  from{ transform: translate(0, 0) scale(1); }
  to{ transform: translate(-2.5%, 2.5%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  body::after{ animation:none; }
}

/* Native cross-document page transitions — the fallback path (direct
   loads, JS-disabled, first visit). assets/js/router.js drives the same
   ::view-transition-old/new(root) animation for in-session navigation via
   document.startViewTransition(), so both paths share one visual result. */
@view-transition{
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  animation-fill-mode: both;
}
::view-transition-old(root){ animation-name: page-slide-out; }
::view-transition-new(root){ animation-name: page-slide-in; }
@keyframes page-slide-out{
  from{ opacity:1; transform: translateX(0) scale(1); }
  to{ opacity:0; transform: translateX(-32px) scale(.98); }
}
@keyframes page-slide-in{
  from{ opacity:0; transform: translateX(32px) scale(.98); }
  to{ opacity:1; transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
}

h1, h2, h3{
  color:var(--heading);
  font-weight:600;
  margin:0 0 .7rem;
}
h2{
  font-size:1.15rem;
  padding-bottom:.3em;
  border-bottom:1px solid var(--border);
}

p{ margin:0 0 .55rem; }

a{ color:var(--link); text-decoration:none; transition: color .15s ease, transform .1s ease; }
a:hover{ text-decoration:underline; }
a:active{ transform: scale(.96); filter: drop-shadow(0 0 6px var(--link)); }
a:focus-visible{ outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }

ul{ margin:0; padding-left:1.4rem; }
ul li{ margin-bottom:.35rem; }

.hidden{ display:none; }

.empty-state{
  color:var(--text-dim);
  font-size:.88rem;
  border:1px dashed var(--border);
  border-radius:10px;
  padding:1rem 1.1rem;
  line-height:1.55;
}
.empty-state a{ color:var(--link); }

footer{
  text-align:center;
  color:var(--text-dim);
  font-size:.85rem;
  margin-top:3rem;
  width: var(--content-width);
}

/* Scroll-reveal for cards/sections (paired with initScrollReveal() in
   interactions.js). SAFE by construction: the JS only adds .reveal-pending
   to an element if it measures that element as OFF-SCREEN at setup time.
   Anything already visible in the initial viewport — what a View
   Transition snapshot would capture — never gets an opacity:0 state.
   This is the replacement for an earlier "fade everything in on load"
   system that raced the transition snapshot and caused a real bug
   (content flashing/disappearing on navigation) — see README.md. */
.reveal-pending{
  opacity:0;
  transform: translateY(16px);
}
.reveal-pending.revealed{
  opacity:1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease;
}

/* Hero entrance — a more pronounced reveal than .reveal-pending's subtle
   fade, reserved for the hero specifically per "para o hero, use uma
   animação mais marcante". SAFE for a reason that's easy to miss: the
   .hero-enter class is never written into any .html file — main.js adds
   it only inside the one-time DOMContentLoaded handler, which never runs
   again during a router.js soft-navigation. The raw HTML router.js
   fetches and swaps in never has this class, so navigating to the
   homepage can't replay (or race) this animation — only a genuine fresh
   page load ever sees it. This is what makes it safe to use opacity:0
   here, unlike the staggered fade-up system removed earlier — that one
   was in the static markup itself, so it re-ran, and could go invisible,
   on every navigation. */
@media (prefers-reduced-motion: no-preference){
  .hero-enter > *{
    animation: hero-reveal .8s cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero-enter > *:nth-child(1){ animation-delay: .05s; }
  .hero-enter > *:nth-child(2){ animation-delay: .16s; }
  .hero-enter > *:nth-child(3){ animation-delay: .3s; }
  .hero-enter > *:nth-child(4){ animation-delay: .44s; }
}
@keyframes hero-reveal{
  from{ opacity:0; transform: translateY(18px); filter: blur(8px); }
  to{ opacity:1; transform: translateY(0); filter: blur(0); }
}