/*
Theme Name: Kalyne — Em breve
Theme URI: https://www.behance.net/kalynenobrega
Author: Kalyne Nóbrega
Description: Página "novo site em breve" com trabalhos selecionados do Behance. Todas as páginas do site exibem esta tela enquanto o tema estiver ativo.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kalyne-em-breve
*/

:root{
  /* paleta da moodboard: off-white, cinza quente, azul-marinho, terracota, verde-folha, laranja */
  --bg:#f8f5f3; --tile:#ebe8e4; --ink:#12234a; --ink-soft:#5b6482;
  --clay:#a9674a; --leaf:#7f9468; --orange:#e8873a; --line:#d9d4ce;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font:400 1.05rem/1.6 'Google Sans','Google Sans Flex','Product Sans',system-ui,sans-serif}
a{color:inherit}
.label{font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}

.page{width:calc(100% - 200px);margin:100px auto;min-height:100vh;display:grid;
  grid-template-columns:minmax(222px,.5fr) 2fr;gap:6vw;align-items:center;padding:3rem 0 2rem}

/* texto */
.intro .label{color:var(--clay)}
h1{font-weight:500;font-size:clamp(2.8rem,5.4vw,4.6rem);line-height:1;letter-spacing:-.02em;margin:1rem 0 1.2rem}
h1 .light{font-weight:300}
h1 .bold{font-weight:700}
.desc{font-size:1.2rem;line-height:1.45;margin:0 0 1.2rem;max-width:23rem}
.lead{font-size:.75rem;line-height:1.6;color:var(--ink-soft);max-width:23rem;margin:0 0 1.8rem}
.rule{display:block;width:3.2rem;height:2px;background:var(--leaf);margin:0 0 1.4rem}
.soon{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .8rem;border:1px solid var(--ink);border-radius:999px;margin-bottom:1.6rem;white-space:nowrap}
.soon i{width:.5rem;height:.5rem;border-radius:50%;background:var(--orange);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.25}}
.btn{display:inline-block;font-weight:500;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding:.9rem 1.3rem;background:var(--ink);color:var(--bg);transition:background .2s,transform .2s}
.btn:hover{background:var(--clay);transform:translateY(-2px)}

/* grade de trabalhos (estilo moodboard) */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tile{position:relative;display:block;aspect-ratio:1/1;background:var(--tile);overflow:hidden;text-decoration:none;
  opacity:0;animation:in .7s ease forwards;animation-delay:var(--d,0s)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tile .cap{position:absolute;inset:auto 0 0 0;padding:2.4rem .9rem .8rem;color:#fff;font-size:.82rem;font-weight:500;line-height:1.25;
  background:linear-gradient(to top,rgba(18,35,74,.78),transparent);transform:translateY(100%);transition:transform .35s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.06)}
.tile:hover .cap,.tile:focus-visible .cap{transform:none}
.tile:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@keyframes in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--ink-soft);border-top:1px solid var(--line);padding-top:1.2rem}
footer .label:first-child{color:var(--ink)}

@media (hover:none){.tile .cap{transform:none;padding-top:1.6rem;font-size:.75rem}}
@media (max-width:1000px){
  .page{width:calc(100% - 3rem);grid-template-columns:1fr;min-height:0;margin:2rem auto;gap:2.2rem;padding-top:2rem}
  .board{grid-template-columns:repeat(2,1fr);gap:.7rem}
}
@media (prefers-reduced-motion:reduce){.tile{animation:none;opacity:1}.soon i{animation:none}}