/* ============ BASE ============ */
html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: var(--leading-body);
  /* One continuous amber glow for the whole page. Fixed to the
     viewport (not the document) so it never seams at section
     boundaries and doesn't depend on page length. Individual
     sections are transparent so this always shows through.
     Revert: `background: var(--bg);` and drop background-attachment. */
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(232, 148, 58, 0.10), transparent 65%), var(--bg);
  background-attachment: fixed;
}

::selection {
  background: var(--amber);
  color: var(--bg);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--amber); }

/* ============ GRAIN OVERLAY ============ */
.grain-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, opacity 0.2s ease;
  opacity: 0;
}
.cursor-dot.is-active,
.cursor-ring.is-active {
  opacity: 1;
}
.cursor-ring.is-hovering {
  width: 60px; height: 60px;
  background: rgba(232,148,58,0.15);
}
.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button {
  cursor: none;
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ============ LOADING SCREEN ============ */
.loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
}
.loader__logo {
  width: 160px;
  height: auto;
}
.loader__underline {
  margin-top: 16px;
  width: 160px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
}
.loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
body.is-loading {
  overflow: hidden;
}

/* ============ TYPOGRAPHY ============ */
.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--amber);
  display: inline-block;
}

.display-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-display);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
}

.heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--size-h2);
  line-height: var(--leading-normal);
  color: var(--white);
}

.heading--h3 {
  font-size: var(--size-h3);
}

.body-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--light);
}

.pull-quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: var(--size-h3);
  color: var(--white);
}

.amber-link {
  color: var(--amber);
  font-family: var(--font-body);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--size-body);
  transition: gap 0.3s ease;
}
.amber-link .arrow {
  transition: transform 0.3s ease;
}
.amber-link:hover {
  gap: 16px;
}
.amber-link:hover .arrow {
  transform: translateX(4px);
}

/* ============ LAYOUT ============ */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  position: relative;
}

/* A full-bleed slider already reaches the section edge — drop the
   trailing padding so it doesn't leave an empty gap before the next
   section starts. */
.section--flush-bottom {
  padding-bottom: 0;
}

/* Sections stay transparent so the single fixed glow on <body>
   shows through continuously, with no seam between sections. */
.section--dark,
.section--alt {
  background: transparent;
}

.section__label {
  margin-bottom: 24px;
  display: block;
}

/* ============ REVEALS ============ */
.reveal-line {
  overflow: hidden;
  display: block;
}
.reveal-line .inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-line.is-visible .inner {
  transform: translateY(0);
}

.reveal-body {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: 0.2s;
}
.reveal-body.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.img-reveal {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-reveal.is-visible {
  clip-path: inset(0 0% 0 0);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn--amber {
  background: var(--amber);
  color: var(--bg);
}
.btn--amber:hover {
  background: #f2a555;
}
.btn--outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.35);
}
.btn--outline:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.magnetic {
  display: inline-block;
  position: relative;
}
.magnetic__content {
  display: inline-flex;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ PATTERN A — two column statement ============ */
.pattern-a {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.pattern-a__right .heading {
  margin-bottom: 24px;
}
.pattern-a__right .body-text {
  max-width: 640px;
  margin-bottom: 24px;
}
.pattern-a__right .body-text + .body-text {
  margin-top: -12px;
}

@media (max-width: 900px) {
  .pattern-a {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============ PATTERN B — stacked giant service list ============ */
.service-list {
  border-top: 1px solid var(--divider);
}
.service-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(24px, 4vh, 48px) 0;
  border-bottom: 1px solid var(--divider);
  transition: color 0.3s ease, transform 0.3s ease;
}
.service-list__item:hover {
  color: var(--amber);
  transform: translateX(8px);
}
.service-list__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 110px);
  text-transform: uppercase;
  line-height: 1;
  color: inherit;
}
.service-list__arrow {
  color: var(--amber);
  font-size: clamp(24px, 3vw, 40px);
  flex-shrink: 0;
  margin-left: 24px;
}

/* Shrink the service list on short laptop viewports so all 4 services
   are visible without scrolling on first load (.page-hero override
   lives in services.css, which loads after about.css). */
@media (max-height: 800px) {
  .service-list__item {
    padding: clamp(6px, 1.5vh, 16px) 0;
  }
  .service-list__name {
    font-size: clamp(28px, 5vw, 56px);
  }
}

/* ============ POSTER CARD (shared: homepage carousel + work grid) ============ */
.work-card {
  background: var(--bg-card);
}
.work-card__image {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.work-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-card__info {
  padding: 16px 4px;
}
.work-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
}

/* ============ PATTERN D — full bleed photo with overlay ============ */
.full-bleed {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.full-bleed__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.full-bleed__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1;
}
.full-bleed__content {
  position: relative;
  z-index: 2;
  padding: var(--section-padding) var(--side-padding);
  width: 100%;
}

/* ============ AUTO-ADVANCING LANDSCAPE SLIDER ============ */
.ig-slider {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-card);
}
.ig-slider--full {
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
.ig-slider--scenes {
  aspect-ratio: unset;
  min-height: 80vh;
}
.ig-slider--scenes .ig-slider__slide .full-bleed {
  min-height: 80vh;
}
.ig-slider__progress {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.ig-slider__dash {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}
.ig-slider__dash::before {
  content: '';
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 0%;
  background: var(--amber);
}
.ig-slider__dash.is-done::before {
  width: 100%;
}
.ig-slider__dash.is-active::before {
  animation: ig-progress var(--ig-duration, 4000ms) linear forwards;
}
@keyframes ig-progress {
  from { width: 0%; }
  to { width: 100%; }
}
.ig-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.ig-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ig-slider__slide.is-active {
  opacity: 1;
}
.ig-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ig-slider__zone {
  position: absolute;
  top: 0;
  height: 100%;
  width: 30%;
  z-index: 2;
  background: transparent;
  cursor: pointer;
}
.ig-slider__zone--prev { left: 0; }
.ig-slider__zone--next { right: 0; }
.ig-slider__caption {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 3;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  transition: opacity 0.3s ease;
}
.ig-slider__caption.is-fading {
  opacity: 0;
}
.ig-slider__caption--big {
  left: 32px;
  right: 32px;
  bottom: 32px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 64px);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.ig-slider__caption-group {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 3;
  transition: opacity 0.3s ease;
}
.ig-slider__caption-group.is-fading {
  opacity: 0;
}
.ig-slider__caption-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 3.5vw, 40px);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.ig-slider__caption-group--big .ig-slider__caption-title {
  font-size: clamp(28px, 5vw, 64px);
}
.ig-slider__caption-subtitle {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--light);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.ig-slider--full {
  position: relative;
}
.ig-slider--full::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
  z-index: 2;
  pointer-events: none;
}

/* ============ FESTIVAL ROW (static) ============ */
.festivals__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  padding: 0 var(--side-padding);
}
.festivals__row img {
  height: 60px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
.festivals__row img[src*="poff"] {
  /* poff.png has an opaque dark background rather than transparency —
     inverting it would fill the whole frame white instead of just the mark */
  filter: none;
  opacity: 1;
}

/* ============ RESPONSIVE UTILS ============ */
@media (max-width: 700px) {
  .display-text { font-size: clamp(40px, 12vw, 64px); }
  /* Long captions wrap to many more lines at narrow widths than the
     default 16:9 slider box has room for — give this slider extra
     height so the text never overlaps the photo above it. */
  .ig-slider--tall-caption {
    aspect-ratio: unset;
    min-height: 480px;
  }
}