/* =====================================================
   Zyon Web Systems — Logo animada (fiel à arte original)
   A logo foi separada em camadas .webp transparentes
   (assets/logo/) e cada camada é animada só com CSS.
   ===================================================== */
.zy2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1165 / 460;
  line-height: 0;
}
.zy2 img {
  position: absolute;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  user-select: none;
}
.zy2-mark { left:0.000%;top:0.000%;width:52.189%; }
.zy2-l-z { left:38.627%;top:17.609%;width:18.798%; }
.zy2-l-y { left:55.708%;top:32.174%;width:15.536%; }
.zy2-l-o { left:69.528%;top:32.174%;width:15.021%; }
.zy2-l-n { left:84.378%;top:31.739%;width:14.335%; }
.zy2-web { left:65.150%;top:70.000%;width:34.850%; }
.zy2-tag-text { left:10.129%;top:86.087%;width:80.515%; }
.zy2-tag-l { left:0.000%;top:85.217%;width:10.987%; }
.zy2-tag-r { left:90.129%;top:86.304%;width:9.871%; }

/* ---------- Brilho laranja atrás do Z (pulsando) ---------- */
.zy2-aura {
  position: absolute;
  left: 25.5%; top: 44%;
  width: 60%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,.42) 0%, rgba(255,122,26,0) 65%);
  opacity: 0;
  animation: zy2Aura 1.4s .3s ease-out forwards, zy2AuraLoop 4s 1.7s ease-in-out infinite;
}

/* ---------- Z (marca) ---------- */
@property --zy2-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.zy2-markwrap {
  position: absolute; inset: 0;
  animation: zy2Float 6s 2.8s ease-in-out infinite;
}
/* Base escura com o formato do Z: o brilho fica só em volta,
   sem "lavar" o laranja por dentro (cor igual à arte original) */
.zy2-mark-base { left:0%;top:0%;width:52.189%; }
.zy2-mark, .zy2-mark-base {
  opacity: 0;
  transform: scale(.55) rotate(-22deg);
  transform-origin: 25% 45%;
  filter: blur(8px);
  -webkit-mask-image: conic-gradient(from 200deg at 26% 44%, #000 var(--zy2-sweep), transparent 0);
          mask-image: conic-gradient(from 200deg at 26% 44%, #000 var(--zy2-sweep), transparent 0);
  animation: zy2MarkIn 1.25s .2s cubic-bezier(.2,.8,.2,1) forwards,
             zy2Sweep 1.1s .2s ease-out forwards,
             zy2Pulse 3.4s 2.6s ease-in-out infinite;
}
.zy2-mark-base {
  animation: zy2MarkIn 1.25s .2s cubic-bezier(.2,.8,.2,1) forwards,
             zy2Sweep 1.1s .2s ease-out forwards,
             zy2Glow 3.4s 1.4s ease-in-out infinite;
}

/* Reflexo (estrela) na ponta da órbita */
.zy2-glint {
  position: absolute;
  left: 41.89%; top: 6.30%;
  width: 9%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0);
  background:
    radial-gradient(circle, #fff 0 6%, rgba(255,214,140,.9) 12%, rgba(255,150,40,0) 45%),
    linear-gradient(90deg, transparent 0, rgba(255,230,180,.95) 50%, transparent 100%) center / 100% 4% no-repeat,
    linear-gradient(0deg, transparent 0, rgba(255,230,180,.95) 50%, transparent 100%) center / 4% 100% no-repeat;
  mix-blend-mode: screen;
  animation: zy2Glint .7s 1.3s ease-out forwards, zy2Twinkle 3.2s 2.4s ease-in-out infinite;
}

/* ---------- Partículas que convergem para o Z ---------- */
.zy2-particles { position: absolute; left: 25.32%; top: 44.57%; width: 0; height: 0; }
.zy2-particles i {
  position: absolute;
  width: .9cqw; height: .9cqw;
  min-width: 3px; min-height: 3px;
  border-radius: 50%;
  background: #FF7A1A;
  box-shadow: 0 0 1.6cqw #FF7A1A;
  opacity: 0;
  animation: zy2In 1.1s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--d) * 1s);
}
.zy2-particles i:nth-child(even) { background: #FFC233; box-shadow: 0 0 1.6cqw #FFC233; }

/* ---------- Letras "Zyon" ---------- */
.zy2-letter {
  opacity: 0;
  transform: translateY(18%) scale(.88);
  filter: blur(6px);
  animation: zy2Letter .65s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(1.15s + var(--i) * .1s);
}
/* Núcleo laranja do "o" pulsando */
.zy2-core {
  position: absolute;
  left: 76.91%; top: 50.00%;
  width: 9%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,170,60,.85) 0%, rgba(255,122,26,0) 62%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: zy2Core 2.6s 1.9s ease-in-out infinite;
}

/* ---------- "Web Systems" e slogan ---------- */
.zy2-web { opacity: 0; transform: translateX(6%); animation: zy2Slide .7s 1.7s ease forwards; }
.zy2-tag-text { clip-path: inset(0 50% 0 50%); animation: zy2Open .9s 2.05s cubic-bezier(.6,0,.2,1) forwards; }
.zy2-tag-l, .zy2-tag-r { transform: scaleX(0); animation: zy2Line .6s 2.25s ease forwards; }
.zy2-tag-l { transform-origin: right; }
.zy2-tag-r { transform-origin: left; }

/* Reflexo de luz passando pelo nome */
.zy2-shine {
  position: absolute;
  left: 38%; top: 15%; width: 62%; height: 70%;
  overflow: hidden;
  pointer-events: none;
}
.zy2-shine::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  mix-blend-mode: overlay;
  transform: translateX(-130%);
  animation: zy2ShineOnce 1.1s 2.35s ease-in-out forwards, zy2ShineLoop 7s 4.6s ease-in-out infinite;
}

/* ---------- Versão do cabeçalho (sem slogan) ---------- */
.zy-logo { display: block; width: 172px; flex-shrink: 0; container-type: inline-size; }
.zy-logo .zy2-crop { aspect-ratio: 1165 / 385; overflow: hidden; }
.zy-logo .zy2-tag-text, .zy-logo .zy2-tag-l, .zy-logo .zy2-tag-r, .zy-logo .zy2-aura { display: none; }
@media (max-width: 760px) { .zy-logo { width: 140px; } }

/* ---------- Hero ---------- */
.zy-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  container-type: inline-size;
}

/* ---------- Keyframes ---------- */
@keyframes zy2Aura      { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes zy2AuraLoop  { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .85; } 50% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; } }
@keyframes zy2Glow      { 0%,100% { filter: drop-shadow(0 0 .6cqw rgba(255,122,26,.55)); } 50% { filter: drop-shadow(0 0 2.6cqw rgba(255,160,40,.95)); } }
@keyframes zy2MarkIn    { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes zy2Sweep     { to { --zy2-sweep: 360deg; } }
@keyframes zy2Pulse     { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes zy2Float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.2%); } }
@keyframes zy2Glint     { 0% { transform: translate(-50%,-50%) scale(0) rotate(0); } 60% { transform: translate(-50%,-50%) scale(1.5) rotate(45deg); } 100% { transform: translate(-50%,-50%) scale(1) rotate(45deg); } }
@keyframes zy2Twinkle   { 0%,100% { transform: translate(-50%,-50%) scale(1) rotate(45deg); opacity: 1; } 50% { transform: translate(-50%,-50%) scale(.6) rotate(90deg); opacity: .6; } }
@keyframes zy2In        { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(0,0) scale(.2); } }
@keyframes zy2Letter    { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes zy2Core      { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes zy2Slide     { to { opacity: 1; transform: none; } }
@keyframes zy2Open      { to { clip-path: inset(0 0 0 0); } }
@keyframes zy2Line      { to { transform: scaleX(1); } }
@keyframes zy2ShineOnce { to { transform: translateX(130%); } }
@keyframes zy2ShineLoop { 0%,80% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* Quem prefere menos movimento vê a logo pronta, parada */
@media (prefers-reduced-motion: reduce) {
  .zy2, .zy2 * { animation: none !important; }
  .zy2-mark, .zy2-letter, .zy2-web { opacity: 1; transform: none; filter: none; -webkit-mask-image: none; mask-image: none; }
  .zy2-tag-text { clip-path: none; }
  .zy2-tag-l, .zy2-tag-r { transform: none; }
  .zy2-aura { opacity: 1; transform: translate(-50%,-50%); }
  .zy2-mark-base { opacity: 1; transform: none; filter: drop-shadow(0 0 1.5cqw rgba(255,122,26,.6)); -webkit-mask-image: none; mask-image: none; }
  .zy2-particles, .zy2-glint, .zy2-core, .zy2-shine { display: none; }
}