.home-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: min(1200px, 100%);
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(125deg, #1b1c20 0%, #33343a 30%, #414247 52%, #292a2f 74%, #1b1c20 100%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 48%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 48%, transparent 100%);
}

.home-atmosphere canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease; }
.home-atmosphere.is-ready canvas { opacity: 1; }
.home-atmosphere::after { content: ""; position: absolute; inset: 0 0 auto; height: 180px; background: linear-gradient(var(--browser-background), transparent); }

.portfolio-button { position: relative; isolation: isolate; overflow: hidden; transition: color 220ms ease, border-color 220ms ease, transform 180ms ease, box-shadow 180ms ease; }
.portfolio-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #323338;
  clip-path: circle(0% at 90% 50%);
  transition: clip-path 450ms cubic-bezier(.22,.7,.2,1);
}
.portfolio-button::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, #9da0ab38 44%, #ffffffee 50%, transparent 60%);
  transform: translateX(-75%);
  opacity: 0;
}
.portfolio-button > * { position: relative; z-index: 1; }
.portfolio-button.sheen-play::after { animation: button-sheen 1000ms ease-out both; }
.portfolio-button svg, .button-arrow, .direct-contact svg, .header-profile svg { transition: transform 250ms cubic-bezier(.22,.7,.2,1); }
.button-primary:not(:disabled):active, .button-primary.is-pressed { transform: scale(.97); }
.portfolio-button.is-pressed { color: #fff; border-color: #ffffff60; }
.portfolio-button.is-pressed::before { clip-path: circle(150% at 90% 50%); transition-duration: 180ms; }
.portfolio-button.is-pressed svg { transform: translate(3px, -3px); }
.whatsapp-button.is-pressed .button-arrow { transform: translateX(3px); }
.option-mark { transition: background 200ms ease, border-color 200ms ease; }
.option-mark svg { transition: opacity 180ms ease, transform 250ms ease; transform: scale(.7); }
.visual-option input:checked + .option-surface .option-mark svg { transform: scale(1); }
.visual-option:active .option-surface { transform: scale(.985); }
.option-surface { transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, transform 180ms ease; }
.visual-option.is-confirming .option-surface { animation: option-confirm 380ms ease-out; }

@media (hover: hover) and (pointer: fine) {
  .portfolio-button:hover { color: #fff; border-color: #ffffff60; }
  .portfolio-button:hover::before { clip-path: circle(150% at 90% 50%); }
  .portfolio-button:hover svg, .direct-contact a:hover svg, .header-profile:hover svg { transform: translate(2px, -2px); }
  .whatsapp-button:not(:disabled):hover .button-arrow { transform: translateX(3px); }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-pending { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  .motion-enter { animation: home-reveal 950ms cubic-bezier(.22,.7,.2,1) var(--reveal-delay, 0ms) backwards; }
  /* Start the initial hero with the first styled paint, not a later script. */
  .jr-home [data-home-intro] { animation: home-reveal 950ms cubic-bezier(.22,.7,.2,1) var(--reveal-delay, 0ms) backwards; }
  .jr-home [data-home-intro].motion-complete,
  .jr-home [data-home-intro]:focus-within { animation: none; }
  .hero-description { --reveal-delay: 140ms; }
  .services-line { --reveal-delay: 260ms; }
  .portfolio-button { --reveal-delay: 380ms; }
  .project-section { --reveal-delay: 160ms; }
  @media (max-width: 1100px) { .project-section { --reveal-delay: 0ms; } }
}

@keyframes home-reveal {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes button-sheen {
  0% { opacity: 0; transform: translateX(-75%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(75%); }
}
@keyframes option-confirm {
  0% { transform: scale(.98); }
  55% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-atmosphere canvas { display: none; }
  .motion-pending { opacity: 1; transform: none; filter: none; }
  .button-primary:not(:disabled):active, .button-primary.is-pressed, .visual-option:active .option-surface { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .home-atmosphere { display: none; }
}