/*
  ----------------------------------------------------------------------------
  © 2026 Mehdi Dimyadi
  Roozegaar Projects Collection
  All rights reserved.

  Author: Mehdi Dimyadi
  GitHub: https://github.com/MEHDIMYADI

  Description:
  This file is part of the Roozegaar Projects, including web, JSON,
  CSS, and JavaScript files. You may use, modify, and distribute this code
  in accordance with the project license.

  ----------------------------------------------------------------------------

  brand-animations.css: hero decoration (sun and moon, stars, floating icons,
  typing capsules, clock and scroll cue).
*/

.hero-bg { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }

/* ========================================================================== */
/* Sun / moon orb                                                             */
/* ========================================================================== */
.hero-orb {
  position: absolute;
  inset-block-start: calc(var(--header-h) + 1svh);
  inset-inline-end: 9%;
  width: clamp(100px, 21vmin, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffbe6 0%, #ffe08a 30%, #ffb25c 62%, rgba(255, 150, 80, 0) 72%);
  box-shadow: 0 0 90px 30px rgba(255, 190, 90, 0.38), 0 0 220px 80px rgba(255, 140, 90, 0.2);
  animation: orbFloat 14s ease-in-out infinite;
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
/* Slow rotating rays behind the sun */
.hero-orb::before {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 224, 150, 0.22) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 52%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 38%, #000 52%, transparent 100%);
  animation: raysSpin 60s linear infinite;
}
[data-theme="dark"] .hero-orb {
  background: radial-gradient(circle at 36% 34%, #ffffff 0%, #e6f2f6 36%, #b9d3de 62%, rgba(185, 211, 222, 0) 72%);
  box-shadow: 0 0 70px 18px rgba(185, 225, 240, 0.28), 0 0 200px 60px rgba(60, 150, 170, 0.2);
  width: clamp(90px, 18vmin, 220px);
}
[data-theme="dark"] .hero-orb::before { opacity: 0; }

@keyframes orbFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-14px, 18px, 0); }
}
@keyframes raysSpin { to { transform: rotate(360deg); } }

/* ========================================================================== */
/* Glows and stars                                                            */
/* ========================================================================== */
.hero-glow { position: absolute; border-radius: 50%; will-change: transform; }
.glow-a {
  width: 60vmax; height: 60vmax; inset-block-end: -30vmax; inset-inline-start: -18vmax;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), transparent);
  animation: glowA 16s ease-in-out infinite;
}
.glow-b {
  width: 46vmax; height: 46vmax; inset-block-start: -16vmax; inset-inline-start: 22%;
  background: radial-gradient(closest-side, rgba(255, 190, 120, 0.2), transparent);
  animation: glowB 20s ease-in-out infinite;
}
@keyframes glowA { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(6vw, -5vh, 0) scale(1.1); } }
@keyframes glowB { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-7vw, 6vh, 0) scale(0.9); } }

.hero-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 58%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 41% 14%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 57% 38%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 69% 66%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 83% 28%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 92% 74%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 18% 82%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 48% 86%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 76% 12%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 6% 48%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 34% 36%, #fff, transparent);
  animation: twinkle 5s ease-in-out infinite;
}
[data-theme="dark"] .hero-stars { opacity: 0.85; }
@keyframes twinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(0.45); } }

/* ========================================================================== */
/* Floating product icons                                                     */
/* ========================================================================== */
.hero-icons { position: absolute; inset: 0; transition: transform 0.4s ease-out; }
.hero-icons i {
  position: absolute;
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
  font-size: var(--s, 1.8rem);
  color: rgba(255, 255, 255, 0.26);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
  animation: iconDrift 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes iconDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(var(--dx, 14px), var(--dy, -18px)) rotate(var(--dr, 6deg)); }
}

/* ========================================================================== */
/* Typing capsules                                                            */
/*                                                                            */
/* The full line is always laid out (the untyped remainder is transparent),   */
/* so a capsule keeps the size of its final text and never overflows.         */
/* ========================================================================== */
.hero-tags { position: absolute; inset: 0; }
.hero-tag {
  position: absolute;
  max-width: min(300px, 26vw);
  padding: 0.55rem 1rem;
  border-radius: 18px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.45s ease;
  animation: tagFloat 9s ease-in-out infinite;
  overflow-wrap: anywhere;
}
.hero-tag.is-on { opacity: 1; }
.hero-tag.is-blocked { opacity: 0 !important; }
.hero-tag .rest { visibility: hidden; }
.hero-tag .caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -0.15em; }
.hero-tag .caret::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 1px;
  width: 2px;
  border-radius: 2px;
  background: currentColor;
  animation: caretBlink 0.9s steps(1) infinite;
}
.hero-tag.is-done .caret::after { animation-duration: 1.4s; }

@keyframes caretBlink { 0%, 55% { opacity: 0.9; } 56%, 100% { opacity: 0; } }
@keyframes tagFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(var(--fx, 6px), var(--fy, -8px)); }
}

/* Positions sit in the bands above and below the centred hero content */
.hero-tag.t1 { inset-block-start: max(calc(var(--header-h) + 1.4rem), 17%); inset-inline-start: 5%; --fx: 6px; --fy: -7px; }
.hero-tag.t2 { inset-block-start: max(calc(var(--header-h) + 3.6rem), 35%); inset-inline-end: 4%; --fx: -7px; --fy: 6px; animation-delay: -3s; }
.hero-tag.t3 { inset-block-end: calc(var(--wave-h) + 5.6rem); inset-inline-start: 6%; --fx: 5px; --fy: 8px; animation-delay: -5s; }
.hero-tag.t4 { inset-block-end: calc(var(--wave-h) + 8.4rem); inset-inline-end: 7%; --fx: -6px; --fy: -6px; animation-delay: -7s; }

/* ========================================================================== */
/* Clock badge                                                                */
/* ========================================================================== */
.hero-clock {
  position: absolute;
  z-index: 5;
  inset-block-end: calc(var(--wave-h) + 0.9rem);
  inset-inline-end: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 1rem;
  border-radius: 16px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  animation: riseIn 0.9s var(--ease) 0.9s forwards;
}
.hc-date { font-size: 0.78rem; white-space: nowrap; }
.hc-time {
  display: inline-flex;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.hc-digit { display: inline-block; min-width: 1.15ch; text-align: center; }
.hc-digit.tick { animation: digitTick 0.4s ease; }
.hc-sep { animation: colonPulse 1s steps(2) infinite; }
@keyframes colonPulse { 50% { opacity: 0.25; } }
@keyframes digitTick {
  0%   { transform: translateY(0); opacity: 1; }
  40%  { transform: translateY(-45%); opacity: 0.2; }
  41%  { transform: translateY(45%); }
  100% { transform: translateY(0); opacity: 1; }
}

/* ========================================================================== */
/* Scroll cue                                                                 */
/* ========================================================================== */
.hero-cue {
  position: absolute;
  z-index: 5;
  inset-block-end: calc(var(--wave-h) + 0.9rem);
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-inline-start: -21px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: cueBounce 2.2s ease-in-out infinite;
  transition: background-color 0.3s ease;
}
.hero-cue:hover { background: rgba(255, 255, 255, 0.28); }
@keyframes cueBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ========================================================================== */
/* Adaptive visibility                                                        */
/* ========================================================================== */
@media (max-width: 1100px) {
  .hero-tag { max-width: min(260px, 30vw); }
  .hero-tag.t2 { inset-inline-end: 3%; }
}

/* Phones keep two capsules; the middle band stays clear for the text */
@media (max-width: 700px) {
  .hero-tag { max-width: min(250px, 66vw); font-size: 0.74rem; padding: 0.45rem 0.85rem; }
  .hero-tag.t1 { inset-block-start: max(calc(var(--header-h) + 1rem), 14%); inset-inline-start: 5%; }
  .hero-tag.t3 { inset-block-end: calc(var(--wave-h) + 5rem); inset-inline-start: auto; inset-inline-end: 5%; }
  .hero-tag.t2, .hero-tag.t4 { display: none; }
  .hero-clock { inset-inline-end: 0.8rem; padding: 0.35rem 0.75rem; }
  .hc-date { display: none; }
  .hero-icons i { --s: 1.3rem; }
  .hero-orb { inset-inline-end: 4%; }
}

/* Not enough vertical room: drop the capsules and the clock, keep the cue */
@media (max-height: 640px) {
  .hero-tag, .hero-clock { display: none; }
}
@media (max-height: 470px) {
  .hero-cue, .hero-icons { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero-orb { inset-inline-end: 5%; opacity: 0.8; }
}