/* FastIQ Design System — extensões: efeitos decorativos, reveal em cascata, componentes (tooltip, modal, HUD, tilt) e easings colhidos das demais páginas */

:root{
  /* Easings assinatura (animations-gemini2) */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-elastic:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Reveal escalonado (filhos de .reveal) — surgimento em cascata ---------- */
.js .reveal .ds-up{opacity:0;transform:translateY(24px)}
.js .reveal.in .ds-up{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.ds-up.d1{transition-delay:.06s}.ds-up.d2{transition-delay:.12s}.ds-up.d3{transition-delay:.18s}
.ds-up.d4{transition-delay:.24s}.ds-up.d5{transition-delay:.30s}.ds-up.d6{transition-delay:.36s}
.ds-up.d7{transition-delay:.42s}.ds-up.d8{transition-delay:.48s}

/* ---------- Surgimento na carga (hero) — blur + sobe + fade ---------- */
@keyframes ds-rise{0%{opacity:0;transform:translateY(34px);filter:blur(12px)}100%{opacity:1;transform:none;filter:blur(0)}}
.ds-load{animation:ds-rise .95s var(--ease-out) both}

/* ---------- Aurora / orbs animados de fundo das seções ---------- */
.ds-aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ds-orb{position:absolute;border-radius:9999px;filter:blur(100px)}
.ds-orb-a{width:34rem;height:34rem;background:rgba(255,90,0,.16);top:-12rem;left:-10rem;animation:fiq-drift 19s ease-in-out infinite}
.ds-orb-b{width:26rem;height:26rem;background:rgba(255,122,51,.12);bottom:-10rem;right:-8rem;animation:fiq-drift 24s ease-in-out infinite reverse}
.ds-orb-c{width:20rem;height:20rem;background:rgba(255,90,0,.10);top:30%;left:55%;animation:fiq-glow-pulse 12s ease-in-out infinite}

/* ---------- Spotlight que "respira" (animations-gemini2) ---------- */
@keyframes ds-spotlight{0%{opacity:.30;transform:translate(-50%,-50%) scale(.92)}100%{opacity:.55;transform:translate(-50%,-50%) scale(1.12)}}
.ds-spotlight{position:absolute;top:50%;left:50%;width:42rem;height:42rem;border-radius:9999px;
  background:radial-gradient(circle,rgba(255,90,0,.22) 0%,rgba(0,0,0,0) 68%);mix-blend-mode:screen;
  filter:blur(60px);pointer-events:none;animation:ds-spotlight 9s ease-in-out infinite alternate}

/* ---------- Grade radial de pontos (instagram-slides) ---------- */
.ds-dots{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 0);background-size:24px 24px}

/* ---------- Sombra de 6 camadas (sidebar — "beautiful-shadow") ---------- */
.beautiful-shadow{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 1px -.5px rgba(0,0,0,.06),0 3px 3px -1.5px rgba(0,0,0,.06),0 6px 6px -3px rgba(0,0,0,.06),0 12px 12px -6px rgba(0,0,0,.06),0 24px 24px -12px rgba(0,0,0,.06)}
.beautiful-shadow-dark{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1px 1px -.5px rgba(0,0,0,.3),0 3px 3px -1.5px rgba(0,0,0,.3),0 6px 6px -3px rgba(0,0,0,.3),0 12px 12px -6px rgba(0,0,0,.3),0 24px 24px -12px rgba(0,0,0,.3)}

/* ---------- Botão "beam" — borda cônica girando + brilho (animations-gemini) ---------- */
.ds-spin-beam{animation:fiq-spin 3.5s linear infinite}
@keyframes ds-shimmer{0%{transform:translateX(-130%) skewX(-15deg)}100%{transform:translateX(230%) skewX(-15deg)}}

/* ---------- Gradiente animado (texto / barra) ---------- */
@keyframes ds-grad-pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ds-grad-animated{background:linear-gradient(120deg,#FF9B5E,#FF5A00,#FF7A33,#FF5A00,#FF9B5E);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:ds-grad-pan 8s ease infinite}

/* ---------- Keyframes extras colhidos (gemini2 / instagram) ---------- */
@keyframes ds-morph{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
.ds-morph{animation:ds-morph 8s ease-in-out infinite}
@keyframes ds-radar{0%{transform:scale(.6);opacity:1;border-width:2px}100%{transform:scale(2.6);opacity:0;border-width:0}}
.ds-radar{animation:ds-radar 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ds-pop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
.ds-pop:hover{animation:ds-pop .35s ease-out}
@keyframes ds-beam-line{0%{left:-40%}100%{left:120%}}
.ds-beam-line::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,90,0,.6),transparent);animation:ds-beam-line 2.4s ease-in-out infinite}

/* ---------- Pilha de cartões giratória (instagram-slides) ---------- */
@keyframes ds-stack{0%,22%{transform:translateY(0) scale(1);z-index:30;opacity:1;filter:blur(0)}
  33%,55%{transform:translateY(-34px) scale(.85);z-index:10;opacity:.35;filter:blur(2px)}
  66%,88%{transform:translateY(-17px) scale(.92);z-index:20;opacity:.7;filter:blur(1px)}
  100%{transform:translateY(0) scale(1);z-index:30;opacity:1;filter:blur(0)}}
.ds-stack-card{animation:ds-stack 9s infinite}

/* ---------- Borda gradiente 1px mascarada (gemini / instagram) ---------- */
[style*="--bd-grad"]{position:relative}
[style*="--bd-grad"]::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask-composite:exclude;background:var(--bd-grad);pointer-events:none}

/* ---------- Esconde scrollbar (instagram / sidebar) ---------- */
.hide-scrollbar::-webkit-scrollbar{display:none}
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* ---------- Trilho de slides com fade nas bordas (instagram-slides) ---------- */
.ds-slides-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}

/* ---------- Tooltip (componente) ---------- */
.ds-tip{position:relative}
.ds-tip-box{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px) scale(.95);
  white-space:nowrap;padding:7px 11px;border-radius:8px;background:rgba(10,10,10,.96);color:#F2EEE6;
  border:1px solid rgba(255,90,0,.3);font-size:12px;opacity:0;pointer-events:none;z-index:60;
  box-shadow:0 8px 24px rgba(0,0,0,.5);transition:all .28s var(--ease-elastic)}
.ds-tip-box::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:rgba(10,10,10,.96)}
.ds-tip:hover .ds-tip-box{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

/* ---------- Modal ---------- */
.ds-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:1.5rem}
.ds-modal.is-open{display:flex}
.ds-modal-backdrop{position:absolute;inset:0;background:rgba(5,5,5,.78);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease}
.ds-modal.is-open .ds-modal-backdrop{opacity:1}
.ds-modal-panel{position:relative;transform:translateY(18px) scale(.96);opacity:0;transition:transform .4s var(--ease-elastic),opacity .4s ease}
.ds-modal.is-open .ds-modal-panel{transform:none;opacity:1}

/* ---------- Cantos HUD (gemini2) ---------- */
.ds-hud{position:relative}
.ds-hud::before,.ds-hud::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--fiq-orange);opacity:.7}
.ds-hud::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ds-hud::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------- Tilt 3D (hero) ---------- */
.ds-tilt-stage{perspective:1200px}
.ds-tilt{transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform}

/* ---------- Galeria — colunas com alturas variadas (photographer) ---------- */
.ds-gallery-img{transition:transform .6s var(--ease-out)}
.group:hover .ds-gallery-img{transform:scale(1.06)}

/* ---------- Linha de scroll do hero ---------- */
@keyframes ds-scroll-cue{0%{transform:translateY(0);opacity:.9}50%{transform:translateY(6px);opacity:.3}100%{transform:translateY(0);opacity:.9}}
.ds-scroll-cue{animation:ds-scroll-cue 1.8s ease-in-out infinite}

/* ---------- Respeita prefer-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
