/* The landscape continues beyond the map. Blur only the scenery, never content. */
:root { --acid: #b8ff35; }
.studio, .services, .projects, .proof, .contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #080e0b;
  --landscape-position: 60% center;
  --landscape-blur: 16px;
}
.studio::after, .services::after, .projects::after, .proof::after, .contact::after {
  content: '';
  position: absolute;
  inset: -32px;
  z-index: -2;
  pointer-events: none;
  background: url('assets/iceland-elements.webp') var(--landscape-position) / cover no-repeat;
  filter: blur(var(--landscape-blur)) saturate(.85) brightness(.72);
}
.studio::before, .services::before, .projects::before, .proof::before, .contact::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,#080e0bf5,transparent 24%,transparent 75%,#080e0bf5),
    linear-gradient(90deg,#080e0bcc,#080e0b88 55%,#080e0b77);
}
.studio { --landscape-position: 15% 40%; }
.services { --landscape-position: 75% center; --landscape-blur: 12px; }
.services::before {
  background: linear-gradient(180deg,#080e0bf5,transparent 20%,transparent 80%,#080e0bf5),
    linear-gradient(90deg,#080e0bf0 5%,#080e0bcc 44%,#080e0b55);
}
.projects::after {
  background-size: auto 1200px;
  background-repeat: repeat-y;
  background-position: 72% top;
  filter: blur(22px) saturate(.7) brightness(.7);
}
.projects::before {
  background: linear-gradient(180deg,#080e0bf5,transparent 12%,transparent 90%,#080e0bf5),
    linear-gradient(90deg,#080e0bb3,#080e0b80 65%,#080e0ba6);
}
.proof { --landscape-position: 30% center; --landscape-blur: 9px; }
.contact { --landscape-position: 75% center; --landscape-blur: 18px; }
.contact::before {
  background: linear-gradient(180deg,#080e0bf5,transparent 22%,#080e0bf5),
    linear-gradient(90deg,#080e0b66,#080e0b9c 50%,#080e0bd9);
}
.section h2, .contact h2 {
  font-family: 'Arial Black','Helvetica Neue',Arial,sans-serif;
  font-weight: 900;
  letter-spacing: -.055em;
}
.section h2 em, .contact h2 em, .proof-visual-line em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: #b8ff35;
}
.section-label, .projects-top .section-label { color: #c5e2cf; }
.studio-copy > p, .services-heading p, .portfolio-details p, .proof-copy > p { color: #d2ded5; }
.studio-grid article { border-color: #d8f5e63d; }
.services-list { border-top-color: #d8f5e65c; }
.service-tab { color: #bfcfc3; border-bottom-color: #d8f5e633; }
.service-tab:hover, .service-tab:focus-visible, .service-tab.is-active {
  color: #b8ff35;
  background: linear-gradient(90deg,#b8ff3514,transparent);
  padding-inline: .8rem;
}
.service-tab.is-active { border-bottom-color: #b8ff3599; }
.service-tab:focus-visible { outline: 2px solid #b8ff35; outline-offset: 3px; }
.service-panel {
  padding: clamp(1.25rem,2.5vw,2.6rem);
  border: 1px solid #ddffe32b;
  border-radius: 1rem;
  background: linear-gradient(135deg,#0b1a12c9,#07110ee6);
  box-shadow: 0 24px 70px #0004;
}
.service-scene { border-radius: .6rem; border: 1px solid #ddffe322; }
.service-description { color: #d2ded5; }
.service-panel li::before { color: #b8ff35; }
.service-panel .button { color: #b8ff35; border-bottom-color: #b8ff3580; }
.portfolio-media { border: 1px solid #d8f5e638; border-radius: .65rem; box-shadow: 0 20px 50px #0005; }
.portfolio-meta small, .portfolio-details .portfolio-meta span { color: #b2c8b9; }
.portfolio-details > a { color: #b8ff35; }
.project-preview-trigger > span { border-radius: .35rem; background: #b8ff35; color: #08110b; }
.proof-visual { justify-content: center; gap: 3rem; }
.proof-visual-line { font-family: 'Arial Black','Helvetica Neue',Arial,sans-serif; font-weight: 900; }
.proof-visual-top, .proof-visual-bottom { color: #b2c8b9; }
.contact-form {
  padding: clamp(1.25rem,2.5vw,2.5rem);
  border: 1px solid #ddffe32b;
  border-radius: 1rem;
  background: #08130ee0;
}
.contact-form .button { background: #b8ff35; color: #08110b; border-radius: .5rem; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #b8ff35; box-shadow: 0 2px 0 #b8ff35; }
.contact-copy > a { color: #b8ff35; }
.brief-picker input:checked + span { background: #b8ff351c; border-color: #b8ff35; }
/* Progressive entrance: static HTML remains visible if motion JS cannot run. */
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal {
  --reveal-x: 0px;
  --reveal-y: 48px;
  opacity: 0;
  transform: translate3d(var(--reveal-x),var(--reveal-y),0) scale(.985);
  transition: opacity .7s ease,transform .85s cubic-bezier(.16,1,.3,1),translate .35s ease;
  transition-delay: var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms;
}
.motion-ready .reveal[data-reveal-from='left'] { --reveal-x: -38px; --reveal-y: 18px; }
.motion-ready .reveal[data-reveal-from='right'] { --reveal-x: 38px; --reveal-y: 18px; }
.motion-ready .reveal--stationary { transform: none; }
.motion-ready .reveal.is-visible, .motion-ready .reveal:focus-within { opacity: 1; transform: none; }
.motion-setup .reveal { transition: none !important; }
.motion-ready .motion-section::after {
  opacity: .4;
  transform: scale(1.035);
  transition: opacity 1.2s ease,transform 1.8s cubic-bezier(.16,1,.3,1);
}
.motion-ready .motion-section.section-in-view::after { opacity: 1; transform: none; }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .portfolio-card.is-visible:hover, .portfolio-card.is-visible:focus-within { translate: 0 -6px; }
  .portfolio-media { transition: border-color .35s,box-shadow .35s; }
  .portfolio-card:hover .portfolio-media, .portfolio-card:focus-within .portfolio-media {
    border-color: #b8ff3570;
    box-shadow: 0 24px 60px #0007,0 0 26px #b8ff3510;
  }
  .motion-section.section-in-view:hover::after { transform: scale(1.015); }
}
@media(prefers-reduced-motion:reduce) {
  .motion-ready .reveal, .reveal { opacity: 1; transform: none; translate: none; transition: none; }
  .motion-ready .motion-section::after { opacity: 1; transform: none; transition: none; }
}
@media(max-width:760px) {
  .studio::after, .services::after, .projects::after, .proof::after, .contact::after {
    inset: -20px;
    filter: blur(10px) saturate(.8) brightness(.65);
  }
  .projects::after { background-size: auto 900px; }
  .service-panel { top: 0; }
  .contact-grid { gap: 3rem; }
  .section h2 { font-size: clamp(2.4rem,10vw,4rem); }
  .contact h2 { font-size: clamp(3rem,12vw,5rem); }
  .proof-visual { height: auto; min-height: 24rem; }
  .motion-ready .reveal { --reveal-y: 30px; }
  .motion-ready .reveal[data-reveal-from] { --reveal-x: 0px; --reveal-y: 30px; }
}