/* «O Maestro — da intenção à obra» · camada visual do atanazio.com (prévia)
   A: o topo mostra a mensagem e o contacto sobre a cena do maestro (camadas 2.5D).
   B: o trabalho real assenta sobre a secretária com a partitura; entra pelo gesto em retícula.
   C: as marcas abrem sobre o palco de plintos.
   Sem JavaScript a página fica completa com as imagens estáticas. */

:root { --ob-tinta: #0b1416; --ob-petroleo: #10262b; --ob-marfim: #f2efe8; }

/* ---------- A · topo ---------- */
.hero {
  /* a barra ciano do site acompanha a cena e apaga-se onde o palco se funde no marfim */
  border-image: linear-gradient(180deg, var(--cyan) 0, var(--cyan) calc(100% - 320px), rgba(27,150,166,0) calc(100% - 70px)) 1;
  min-height: 100vh; min-height: 100svh;
  background:
    linear-gradient(90deg, rgba(8,13,15,.9) 0%, rgba(8,13,15,.72) 30%, rgba(8,13,15,.18) 54%, rgba(8,13,15,0) 70%),
    linear-gradient(180deg, rgba(8,13,15,.55) 0%, rgba(8,13,15,0) 22%),
    var(--ob-tinta) url("obra/a_estatica.webp?v=4") 100% 100% / cover no-repeat;
}
.hero .hero-portrait, .hero .grid-lines { display: none; }
.hero .hero-layout { grid-template-columns: minmax(0, 560px) 1fr; min-height: calc(100svh - 132px); padding-bottom: 118px; }
.hero .hero-copy { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.ob-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1s cubic-bezier(.2,.7,.2,1); }
.ob-tela.ob-pronta { opacity: 1; }

/* grelha editorial e microtexto */
.ob-grade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ob-grade i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.07); }
.ob-grade b { position: absolute; width: 9px; height: 9px; margin: -4px 0 0 -4px; }
.ob-grade b::before, .ob-grade b::after { content: ''; position: absolute; background: rgba(255,255,255,.34); }
.ob-grade b::before { left: 4px; top: 0; width: 1px; height: 9px; }
.ob-grade b::after { top: 4px; left: 0; height: 1px; width: 9px; }
.ob-rotulo { position: absolute; z-index: 2; pointer-events: none; display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.62); font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.ob-rotulo::before { content: ''; width: 34px; height: 1px; background: var(--cyan); }
.hero > .ob-rotulo { right: max(24px, calc((100% - var(--shell)) / 2)); top: 154px; flex-direction: row-reverse; }

/* ---------- B · sistema ---------- */
#trabalho.work {
  position: relative; overflow: hidden; color: #fff; border-top: 0;
  background:
    linear-gradient(180deg, rgba(8,13,15,.78) 0%, rgba(8,13,15,.55) 46%, rgba(8,13,15,0) 70%),
    var(--ob-tinta) url("obra/b.webp?v=4") 64% 100% / cover no-repeat;
  padding-bottom: clamp(300px, 33vw, 520px);
}
#trabalho.work .work-layout { position: relative; z-index: 1; }
#trabalho.work .eyebrow.dark { color: var(--cyan); }
#trabalho.work .work-copy > p:not(.eyebrow) { color: rgba(255,255,255,.78); }
#trabalho.work .dark-link { color: #fff; }
#trabalho.work .pillar-grid { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.1); }
#trabalho.work .pillar-grid li { background: rgba(9,17,19,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#trabalho.work .pillar-grid li > span { color: var(--cyan); }
#trabalho.work .pillar-grid p { color: rgba(255,255,255,.72); }
#trabalho.work > .ob-rotulo { left: max(24px, calc((100% - var(--shell)) / 2)); bottom: 30px; }

/* ---------- C · obra ---------- */
#marcas .portfolio-band {
  position: relative; overflow: hidden;
  background: var(--cyan-deep) url("obra/c.webp?v=4") 50% 72% / cover no-repeat;
}
#marcas .portfolio-band::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,11,.96) 0%, rgba(8,10,11,.5) 16%, rgba(6,30,34,0) 40%); }
/* etiquetas dos produtos: placas nos plintos, com a ligação de cada marca */
.ob-peca { position: absolute; z-index: 2; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; text-align: center; white-space: nowrap; padding: 6px 10px; border-radius: 2px;
  transition: opacity .4s, translate .4s cubic-bezier(.2,.7,.2,1); }
.ob-peca b { font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.ob-peca span { font-size: 11px; font-weight: 600; letter-spacing: .06em; opacity: .78; }
.ob-peca-claro { color: rgba(255,255,255,.92); }
.ob-peca-escuro { color: #1d2a2c; }
.ob-peca:hover, .ob-peca:focus-visible { translate: -50% -2px; }
.ob-peca:hover span, .ob-peca:focus-visible span { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.ob-peca:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
#sistemas .system-card .ob-site { display: inline-block; margin-top: 18px; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan-deep, #0f5e68); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
#sistemas .system-card .ob-site:hover, #sistemas .system-card .ob-site:focus-visible { color: var(--cyan); }
#marcas .portfolio-band .band-inner { position: relative; z-index: 1; align-items: flex-start; flex-direction: column; justify-content: flex-start;
  gap: 14px; min-height: clamp(440px, 64vh, 660px); padding-top: 64px; }
#marcas .portfolio-band .band-inner h2 { max-width: 640px; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; }
#marcas .portfolio-band > .ob-rotulo { left: max(24px, calc((100% - var(--shell)) / 2)); bottom: 28px; color: rgba(255,255,255,.75); }

/* grelha das marcas: a última linha fica ao centro, sem buraco */
@media (width > 1050px) {
  #marcas .brand-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  #marcas .brand-grid > .brand-card { grid-column: span 2; }
  #marcas .brand-grid > .brand-card:nth-child(9) { grid-column: 2 / span 2; }
}
@media (760px < width <= 1050px) {
  #marcas .brand-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #marcas .brand-grid > .brand-card { grid-column: span 2; }
  #marcas .brand-grid > .brand-card:nth-child(10) { grid-column: 2 / span 2; }
}

/* ---------- D · expansão (a secção da origem) e E · conversa ---------- */
#origem.origin {
  background:
    linear-gradient(180deg, rgba(8,13,15,.84) 0%, rgba(8,13,15,.62) 50%, rgba(8,13,15,0) 74%),
    #080808 url("obra/d.webp?v=4") 60% 100% / cover no-repeat;
  padding-bottom: clamp(300px, 32vw, 500px);
}
#origem.origin::after { display: none; }
#origem .origin-layout { z-index: 1; }
/* a citação lê-se mesmo quando um módulo da cena passa por trás dela */
#origem blockquote { position: relative; z-index: 1; text-shadow: 0 2px 18px rgba(0,0,0,.55);
  background: linear-gradient(90deg, rgba(8,13,15,.7), rgba(8,13,15,.45)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  padding-block: 12px; padding-right: 18px; border-radius: 0 3px 3px 0; }
#origem > .ob-rotulo, #contacto > .ob-rotulo { left: max(24px, calc((100% - var(--shell)) / 2)); bottom: 30px; }

/* ecrãs 4:3 a 3:2: o conjunto passa por trás do texto, por isso o escurecimento vai mais longe */
@media (min-width: 761px) and (max-aspect-ratio: 3/2) {
  .hero {
    background:
      linear-gradient(90deg, rgba(8,13,15,.92) 0%, rgba(8,13,15,.8) 40%, rgba(8,13,15,.2) 62%, rgba(8,13,15,0) 76%),
      linear-gradient(180deg, rgba(8,13,15,.55) 0%, rgba(8,13,15,0) 22%),
      var(--ob-tinta) url("obra/a_estatica.webp?v=4") 100% 100% / cover no-repeat;
  }
}

/* ---------- celular e tablet ao alto: composição própria ---------- */
@media (width <= 760px), (width <= 1059px) and (orientation: portrait) {
  .hero {
    min-height: 0;
    background:
      linear-gradient(180deg, rgba(8,13,15,.96) 0%, rgba(8,13,15,.9) 46%, rgba(8,13,15,.25) 66%, rgba(8,13,15,0) 80%),
      var(--ob-tinta) url("obra/a_estatica_m.webp?v=4") 50% 100% / auto min(90vw, 60svh) no-repeat;
  }
  .hero .hero-layout { grid-template-columns: 1fr; min-height: 0; padding-bottom: min(90vw, 60svh); }
}
@media (width <= 760px) {
  .hero {
    min-height: 0;
    background:
      linear-gradient(180deg, rgba(8,13,15,.96) 0%, rgba(8,13,15,.9) 46%, rgba(8,13,15,.25) 66%, rgba(8,13,15,0) 80%),
      var(--ob-tinta) url("obra/a_estatica_m.webp?v=4") 50% 100% / auto min(112vw, 64svh) no-repeat;
  }
  .hero .hero-layout { grid-template-columns: 1fr; min-height: 0; padding-bottom: min(112vw, 64svh); }
  .hero > .ob-rotulo, #marcas .portfolio-band > .ob-rotulo { display: none; }
  #trabalho.work { background-image:
      linear-gradient(180deg, rgba(8,13,15,.9) 0%, rgba(8,13,15,.8) 60%, rgba(8,13,15,0) 82%), url("obra/b_m.webp?v=4");
    background-size: auto, 190% auto; background-position: 0 0, 74% 100%; padding-bottom: 72vw; }
  #marcas .portfolio-band { background-image: url("obra/c_m.webp?v=4"); background-size: 100% auto; background-position: 50% 100%; background-color: #0e1112; }
  .ob-peca { padding: 4px 6px; gap: 2px; }
  .ob-peca b { font-size: 10px; letter-spacing: .14em; }
  .ob-peca span { font-size: 9.5px; letter-spacing: .02em; }
  #marcas .portfolio-band .band-inner { min-height: 118vw; padding-top: 44px; }
  .ob-grade { display: none; }
  #origem.origin { background-image:
      linear-gradient(180deg, rgba(8,13,15,.92) 0%, rgba(8,13,15,.82) 62%, rgba(8,13,15,0) 84%), url("obra/d_m.webp?v=4");
    background-size: auto, 190% auto; background-position: 0 0, 70% 100%; padding-bottom: 70vw; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-tela { display: none; }
}

/* ---------- profundidade nos cartões e livros (herdado da camada anterior) ---------- */
/* profundidade: cartões inclinam com o cursor e entram em perspetiva */
.cf-3d {
  --cf-rx: 0deg; --cf-ry: 0deg; --cf-in-y: 0px; --cf-in-rx: 0deg;
  transform: perspective(1100px) translate3d(0, var(--cf-in-y), 0)
             rotateX(calc(var(--cf-rx) + var(--cf-in-rx))) rotateY(var(--cf-ry));
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .9s cubic-bezier(.2,.7,.2,1), box-shadow .7s;
  backface-visibility: hidden;
}
.cf-3d.cf-por-entrar { --cf-in-y: 26px; --cf-in-rx: 8deg; }  /* visível desde o início: só assenta em perspetiva */
.cf-3d.cf-em-cima { transition-duration: .35s, .9s, .5s; }
.cf-brilho {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3;
  background: radial-gradient(520px circle at var(--cf-mx, 50%) var(--cf-my, 0%), rgba(255,255,255,.16), rgba(255,255,255,0) 46%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .5s;
}
.cf-em-cima .cf-brilho { opacity: 1; }
.cf-relativo { position: relative; }


/* livros: a capa verdadeira, como objeto, num cartão escuro; capa e botão levam à loja */
.book-card.cf-livro { background: var(--charcoal); color: #fff; }
.book-card.cf-livro > span { color: var(--muted); }
.book-card.cf-livro h3 { font-size: 40px; margin: auto 0 14px; }
.book-card.cf-livro p { color: rgba(255,255,255,.76); margin: 0; }
.book-card.cf-livro > a:not(.cf-livro-vitrine) { color: #fff; transition: color .3s; }
.book-card.cf-livro > a:not(.cf-livro-vitrine):hover,
.book-card.cf-livro > a:not(.cf-livro-vitrine):focus-visible { color: var(--cyan-pale); }
.book-card .cf-livro-vitrine {   /* «.book-card a» do site dá margem a todos os links do cartão */
  position: relative; display: flex; justify-content: center; align-items: center;
  margin: -32px -32px 24px; padding: 36px 0 38px; text-transform: none; border-radius: 4px 4px 0 0;
  perspective: 1200px; perspective-origin: 50% 40%;
  background:
    radial-gradient(46% 58% at 50% 44%, rgba(255,255,255,.11), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #202020, #171717);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cf-livro-vitrine::after {   /* sombra no chão */
  content: ''; position: absolute; left: 50%; bottom: 24px; width: 156px; height: 22px; translate: -46% 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.62), rgba(0,0,0,0) 100%);
  pointer-events: none; z-index: 0;
}
.cf-livro-obj {
  --t: 15px; position: relative; z-index: 1; display: block; width: 136px; aspect-ratio: 1000 / 1497;
  transform-style: preserve-3d; transform: rotateY(-27deg) rotateX(4deg);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.cf-livro-obj img, .cf-livro-vinco {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  border-radius: 1px 3px 3px 1px; transform: translateZ(calc(var(--t) / 2));
}
.cf-livro-vinco {   /* o vinco da lombada e o brilho do papel */
  pointer-events: none; transform: translateZ(calc(var(--t) / 2 + .5px));
  background:
    linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(255,255,255,.22) 2.2%, rgba(0,0,0,.16) 4%, rgba(255,255,255,0) 8%),
    linear-gradient(115deg, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 38%);
}
.cf-livro-obj::before {   /* as folhas */
  content: ''; position: absolute; top: 1.2%; height: 97.6%; width: var(--t);
  left: calc(100% - var(--t) / 2 - 2px); transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #f3efe6 0 1px, #d8d2c5 1px 2px), #ece7dc;
}
.cf-livro-obj::after {    /* contracapa */
  content: ''; position: absolute; inset: 0; border-radius: 1px 3px 3px 1px;
  transform: translateZ(calc(var(--t) / -2)); background: #262626;
  box-shadow: -12px 16px 34px rgba(0,0,0,.5);
}
.cf-livro:hover .cf-livro-obj, .cf-livro-vitrine:focus-visible .cf-livro-obj {
  transform: rotateY(-11deg) rotateX(2deg) translateY(-5px);
}
.cf-livro-vitrine:focus-visible { outline: 2px solid var(--cyan); outline-offset: -6px; }
@media (width <= 760px) {
  .book-card .cf-livro-vitrine { padding: 34px 0 36px; }
  .cf-livro-obj { width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-livro-obj { transition: none; }
}

@media (prefers-reduced-motion: reduce) { .cf-3d, .cf-3d.cf-por-entrar { transform: none; } }