/* The shift clock is the hero's live focal point. Decorative layers never receive input. */
.hero[data-offscreen="true"] .clock-scenery *,
.hero[data-offscreen="true"] .hero-clock-orbit__particle,
.hero[data-offscreen="true"] .hero-clock-orbit::after,
.hero[data-offscreen="true"] .clock-console::before,
.hero[data-offscreen="true"] .clock-console::after,
.hero[data-offscreen="true"] .console-sparks::before,
.hero[data-offscreen="true"] .console-sparks::after { animation-play-state: paused; }
.hero {
  background: radial-gradient(ellipse at 75% 30%, #097d6955, transparent 48%),
    radial-gradient(ellipse at 20% 90%, #045a4c66, transparent 48%), #022e29;
}
.hero::after { opacity: .3; }
.hero-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-light { position: absolute; border-radius: 50%; filter: blur(55px); opacity: .55; }
.hero-light--mint { width: 65%; height: 80%; right: -15%; top: -20%; background: radial-gradient(ellipse, #40e9af88, #07937c44 48%, transparent 70%); }
.hero-light--blue { width: 65%; height: 95%; left: -35%; bottom: -35%; background: radial-gradient(ellipse, #3dc7d277, #117b6944 48%, transparent 70%); }
.hero-glass-sheet {
  position: absolute; inset: -25% -15%; transform: rotate(-24deg);
  border: 1px solid #d1fff51a; border-radius: 45%;
  background: linear-gradient(95deg, transparent 25%, #9df8e008 44%, #b6ffe61c 49.7%, #c6fff62c 50%, #6cd4bf09 50.3%, transparent 70%);
  box-shadow: inset 0 1px 0 #dbfff533, 0 -30px 100px #1dbd9c0d;
}
.clock-console {
  position: relative; isolation: isolate; padding: 12px;
  border-radius: clamp(26px, 3vw, 40px) clamp(38px, 5vw, 64px) clamp(26px, 3vw, 40px) clamp(38px, 5vw, 64px);
  border: 1px solid #a9ffe13b;
  background: radial-gradient(ellipse at 0 0, #71f7c826, transparent 65%), linear-gradient(130deg, #c6fff112, #063c385e 65%, #61dbca12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 #d7fff536, inset 0 -1px 0 #8ef0d519, 0 20px 55px #001d2933;
}
.clock-console::before {
  content: ''; position: absolute; height: 1px; top: -1px; left: 16%; right: 16%;
  background: linear-gradient(90deg, transparent, #beffe2, transparent); pointer-events: none;
  box-shadow: 0 0 12px #5fffc5;
}
.console-sparks { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: -1; }
.console-sparks i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c9ffe9; box-shadow: 0 0 9px #71ffd3; opacity: .5; }
.console-sparks i:nth-child(1) { left: 4%; top: 78%; }
.console-sparks i:nth-child(2) { left: 35%; top: 42%; animation-delay: -2s; }
.console-sparks i:nth-child(3) { left: 94%; top: 60%; animation-delay: -4s; }
.console-sparks i:nth-child(4) { left: 68%; top: 90%; animation-delay: -6s; }
.hero-clock-panel .clock-console .orbit-event { margin: 0; background: #003b334d; border-color: #a3ffda25; box-shadow: inset 0 1px 0 #b7ffe50d; }
.hero-clock-panel .clock-console .clock-range-wrap { width: 100%; margin-top: 10px; background: transparent; }
.hero-clock-panel .clock-console .moment-controls { margin-top: 4px; gap: 6px; }
.hero-clock-panel .clock-console .moment-controls button { background: #b6ffe909; border-color: #9be9cf38; }
.hero-clock-panel .clock-console .moment-controls button[aria-pressed="true"] { color: #033b2d; background: linear-gradient(115deg, #88ebc6, #c3f393); border-color: #bbffe0; box-shadow: 0 4px 18px #51e8b51a; }
@keyframes hero-light-drift { to { transform: translate(8%, 8%) scale(1.12); opacity: .8; } }
@keyframes console-spark-drift { 0% { transform: translate(0, 12px); opacity: 0; } 35%,65% { opacity: .7; } 100% { transform: translate(18px, -65px); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-light { animation: hero-light-drift 13s ease-in-out infinite alternate; }
  .hero-light--blue { animation-delay: -7s; }
  .console-sparks i { animation-name: console-spark-drift; animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite; }
}
@media (max-width: 600px) {
  .clock-console { padding: 10px; border-radius: 26px 38px 26px 38px; }
  .hero-light--mint { width: 110%; height: 65%; right: -45%; top: 10%; }
}
.header { background: rgba(3, 40, 35, .9); }
.hero h1 { letter-spacing: -.055em; text-shadow: 0 4px 28px #00261f30; }
.hero .hero-line--accent {
  color: #87e9bd;
  background: linear-gradient(115deg, #a7f3d1, #69d6b1 60%, #c2f388);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .hero-p { color: #c4e7da; }
.hero .hero-note { max-width: 43ch; color: #a9d3c2; }
.hero .hero-actions { gap: 12px; }
.hero .hero-actions .button { min-height: 52px; border-radius: 12px; }
.hero .hero-actions .btn-stroke,
.hero .hero-actions .btn-stroke:hover {
  color: #071e18;
  background: linear-gradient(110deg, #80edc3, #c4f37c);
  border-color: #a9f2c6;
  box-shadow: 0 8px 30px #0bce8d26, inset 0 1px 0 #ffffff70;
}
.hero .hero-actions .btn-green,
.hero .hero-actions .btn-green:hover {
  background: #ffffff0c;
  color: #e4fff1;
  border: 1px solid #8ceac34d;
  box-shadow: inset 0 1px 0 #ffffff12;
}
.hero-clock-panel .clock-kicker { color: #b6f4db; letter-spacing: .15em; }
.clock-stage { isolation: isolate; }
.clock-scenery { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.clock-scenery > span { position: absolute; border-radius: 50%; }
.clock-aura {
  inset: 0;
  background: radial-gradient(circle, #04b8862e 20%, #49efb823 52%, transparent 71%);
}
.clock-glass {
  inset: 18%;
  background: radial-gradient(ellipse at 25% 15%, #b3ffe82e, transparent 60%), linear-gradient(145deg, #0b685a99, #012d2bd9);
  border: 1px solid #a8f8d937;
  box-shadow: inset 0 2px 2px #c6fff31a, inset 0 -16px 45px #001c2466, 0 15px 40px #001d2433;
}
.clock-orbit--outer {
  inset: 7%;
  border: 1px solid #8ef0cf24;
  border-top-color: #baffdd9c;
  border-bottom-color: #70e0c355;
  box-shadow: 0 0 18px #54ffc00d;
}
.clock-orbit--outer::after {
  content: ''; position: absolute; top: 14%; left: 14%; width: 5px; height: 5px;
  border-radius: 50%; background: #beffe9; box-shadow: 0 0 12px #5effbf;
}
.clock-orbit--inner { inset: 22%; border: 1px dashed #a8f8d925; }
.clock-particle {
  position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
  border-radius: 50%; background: #bdffe5; opacity: .5; box-shadow: 0 0 9px #61ffc0;
}
.clock-center strong { font-weight: 850; font-variant-numeric: tabular-nums; }
.clock-center span { max-width: 20ch; margin-inline: auto; color: #bcebd9; }
.hero-clock-panel .orbit-event {
  background: linear-gradient(115deg, #92ffd018, #052e2b8c);
  border-color: #8effcf42;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 #c1ffe516, 0 12px 28px #001f251f;
}
.hero-clock-panel .clock-range-wrap { padding: 12px 16px; border-radius: 16px; background: #012d282b; }
.hero-clock-panel .moment-controls button { min-height: 42px; transition: background .2s, border-color .2s; }
@keyframes clock-scenery-turn { to { transform: rotate(360deg); } }
@keyframes clock-scenery-pulse { from { opacity: .4; transform: scale(.97); } to { opacity: 1; transform: scale(1.04); } }
@keyframes clock-scenery-particle { 0%,100% { transform: translateY(5px); opacity: .2; } 50% { transform: translateY(-10px); opacity: .85; } }
@keyframes clock-stage-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: no-preference) {
  .clock-orbit--outer { animation: clock-scenery-turn 42s linear infinite; }
  .clock-orbit--inner { animation: clock-scenery-turn 65s linear infinite reverse; }
  .clock-aura { animation: clock-scenery-pulse 5s ease-in-out infinite alternate; }
  .clock-particle { animation: clock-scenery-particle 5s ease-in-out var(--delay) infinite; }
  .clock-glass { animation: clock-stage-float 7s ease-in-out infinite; }
}
@media (max-width: 600px) {
  .hero .hero-actions { flex-wrap: wrap; }
  .hero .hero-actions .button { flex: 1 1 160px; padding-inline: 12px; }
  .hero-clock-panel .clock-range-wrap { padding: 10px 8px; }
  .clock-particle:nth-of-type(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .clock-stage, .clock-scenery * { animation: none !important; }
}
.hero h1 { overflow: visible; }
.hero h1 .hero-line { padding-inline: .045em; margin-inline: -.045em; }
.hero h1 .hero-line--accent { padding-block: .04em .09em; }
.hero-descender-safe {
  display: inline-block;
  line-height: 1.18;
  padding-bottom: .2em;
  margin-bottom: -.2em;
  vertical-align: baseline;
  background: linear-gradient(115deg, #a7f3d1, #69d6b1 60%, #c2f388);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-copy, .hero-art, .hero-clock-panel { min-width: 0; }
.hero h1, .hero-p, .hero-note { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .hero-inner { width: min(100% - 40px, 520px); }
  .hero h1 { font-size: clamp(2.55rem, 10.5vw, 3.35rem); }
}

/* Retain the atmospheric layers while avoiding repeated full-section repaints. */
.hero-light { animation: none; }
.hero::after,
.product::after,
.contact.section::after { opacity: .5; }

/* Vida leve no relógio: respiração do brilho, folha balançando e ponteiro pulsando.
   Usa `rotate`/`translate`/`filter`/`opacity`, sem tocar no `transform` que o ponteiro e as horas já usam. */
@keyframes clock-glow-breathe { 50% { opacity: .55; } }
@keyframes clock-leaf-sway { 0%,100% { rotate: -4deg; translate: 0 0; } 50% { rotate: 4deg; translate: 0 -3px; } }
@keyframes clock-time-glow { 50% { text-shadow: 0 0 34px rgba(120,239,194,.5); } }
@keyframes clock-knob-pulse {
  50% { filter: drop-shadow(0 0 10px #4aefbd) drop-shadow(0 0 24px rgba(74,239,189,.95)); }
}
@media (prefers-reduced-motion: no-preference) {
  .clock-day-glow { animation: clock-glow-breathe 4.2s ease-in-out infinite; }
  .clock-center .clock-leaf { animation: clock-leaf-sway 5.5s ease-in-out infinite; transform-origin: 50% 90%; }
  .clock-pointer circle:not(.clock-pointer-hit) { animation: clock-knob-pulse 2.6s ease-in-out infinite; }
}
/* Brilho das horas: antes animava text-shadow (repintura do texto a cada quadro). Agora um halo atrás do
   número pulsa só por opacity, no compositor; o efeito visual é o mesmo. */
@keyframes clock-time-halo { 50% { opacity: 1; } }
.clock-center strong { position: relative; isolation: isolate; }
.clock-center strong::before {
  content: ""; position: absolute; z-index: -1; inset: -30% -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 239, 194, .3), rgba(120, 239, 194, .12) 55%, transparent);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .clock-center strong::before { animation: clock-time-halo 4.2s ease-in-out infinite; }
}
/* Touch: o pulso do ponteiro animava filter num círculo SVG, o que repinta o relógio inteiro a cada quadro.
   No celular o brilho fica fixo no valor médio; no desktop (custo medido baixo) o pulso continua. */
@media (hover: none), (pointer: coarse) {
  .clock-pointer circle:not(.clock-pointer-hit) { animation: none; filter: drop-shadow(0 0 7px #4aefbd) drop-shadow(0 0 16px rgba(74,239,189,.7)); }
}