/*
 * Home Page
 *
 * Developed by: Rhyll Neri
 */

/* Intro section */
.home-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

@media (max-width: 1024px) {
  .home-intro__inner { grid-template-columns: 1fr; }
}

/* Keep the copy above the image and its decorative accent block. */
.home-intro__content {
  position: relative;
  z-index: 2;
}

/* Figure wraps the (clipped) media + the (overhanging) badge so the badge can
   pop OUT past the rounded image instead of being clipped by it. */
.home-intro__figure {
  position: relative;
  z-index: 1;
}

/* Decorative amber block peeking out top-right, behind the image. */
.home-intro__figure::before {
  content: '';
  position: absolute;
  top: -24px;
  right: -24px;
  width: 60%;
  height: 60%;
  background: var(--color-accent);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.home-intro__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.home-intro__media img { width: 100%; height: 100%; object-fit: cover; }

.home-intro__badge {
  position: absolute;
  bottom: -32px;
  right: -32px;
  z-index: 3;
  background: var(--color-white);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(15,27,34,0.04);
  width: 250px;
  border-left: 4px solid var(--color-accent);
  animation: home-intro-badge-float 5s var(--ease-in-out) infinite;
  transition: transform var(--dur-300) var(--ease-out), box-shadow var(--dur-300) var(--ease-out);
}

/* Soft amber halo to lift the badge off the image. */
.home-intro__badge::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(circle at 70% 70%, rgba(224,146,47,0.30), transparent 70%);
  z-index: -1;
  filter: blur(8px);
}

.home-intro__figure:hover .home-intro__badge {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(224,146,47,0.25);
}

@keyframes home-intro-badge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro__badge { animation: none; }
}

@media (max-width: 600px) {
  .home-intro__badge { right: 12px; bottom: -24px; width: auto; min-width: 200px; }
}

.home-intro__badge-value {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.home-intro__badge-label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ---- Hero video (travels from hero into its own section on scroll) ---- */

/* Placeholder in the hero's right column — the video overlays it while pinned. */
.hero__media-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}

.hero-video {
  position: relative;
  padding-block: var(--section-y);
}

/* Optional heading above the landing frame. */
.hero-video .section__head { position: relative; z-index: 1; }

/* Landing frame — the "entire section" target the video grows into. */
.hero-video__frame {
  position: relative;
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--color-ink);
}

/* The STAGE is the box that travels. At rest it fills the frame; while the
   transition runs, JS pins it (position:fixed) and lerps its top/left/width/
   height from the small hero slot to this large frame. */
.hero-video__media {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-ink);
}

.hero-video__media.is-pinned {
  position: fixed;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-xl);
  will-change: top, left, width, height;
}

/* The video fills the stage at 100% width/height at EVERY size — no object-fit.
   It is sized to overflow the stage in both axes while keeping aspect ratio,
   centered, and the stage's overflow:hidden clips the excess. Works whether the
   stage is the small hero slot or the full-width section frame. */
.hero-video__el {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Fallback: no fly transition on small screens / reduced motion — the video
   simply rests in its frame. (JS leaves it un-pinned in these cases.) */
@media (max-width: 1024px) {
  .hero__media-slot { display: none; }
}

/* Services preview */
.home-services {
  background: var(--color-fog);
}

.home-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 1024px) { .home-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .home-services__grid { grid-template-columns: 1fr; } }

/* Approach split */
.home-approach__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}

@media (max-width: 1024px) {
  .home-approach__layout { grid-template-columns: 1fr; }
}

.home-approach__points {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.home-approach__point {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  align-items: flex-start;
}

.home-approach__point-num {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.home-approach__point-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}

.home-approach__point-text {
  color: var(--color-text-muted);
  margin: 0;
}

.home-approach__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.home-approach__visual img { width: 100%; height: 100%; object-fit: cover; }

/* News preview */
.home-news {
  background: var(--color-mist);
}

.home-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) { .home-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .home-news__grid { grid-template-columns: 1fr; } }

/* CTA strip */
.home-cta {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.home-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 90%, rgba(224,146,47,0.25), transparent 50%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .home-cta { grid-template-columns: 1fr; text-align: left; }
}

.home-cta__title {
  font-size: clamp(1.875rem, 3vw + 0.5rem, var(--fs-48));
  color: var(--color-white);
  margin-bottom: var(--space-3);
  position: relative;
}

.home-cta__text {
  color: rgba(255,255,255,0.85);
  margin-bottom: 0;
  position: relative;
}

.home-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  position: relative;
}

@media (min-width: 769px) {
  .home-cta__actions { align-items: flex-end; }
}

/* =========================================================================
 * "Our Approach" — pinned image + horizontally scrolling numbers
 *
 * Default (mobile / no-JS / reduced-motion): a normal stacked layout.
 * Active (desktop): the stage pins, the image stays put and the numbered
 * points scroll across horizontally. No default-layout reveal at the end.
 * ========================================================================= */

/* --- default / fallback layout --- */
.approach-seq__pinned {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.approach-seq__intro { margin-bottom: var(--space-6); }
.approach-seq__viewport { overflow: visible; }
.approach-seq__track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.approach-seq__point {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.approach-seq__num {
  font-family: var(--font-display);
  font-size: var(--fs-42);
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.approach-seq__point-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  margin-bottom: var(--space-2);
}
.approach-seq__point-text { color: var(--color-text-muted); margin: 0; }
.approach-seq__image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.approach-seq__image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .approach-seq__pinned { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .approach-seq__track { grid-template-columns: 1fr; }
}

/* --- active (desktop) pinned horizontal scroll --- */
.home-approach.is-seq .approach-seq { position: relative; }

.home-approach.is-seq .approach-seq__stage {
  position: sticky;
  top: calc(var(--header-height-scroll) + 12px);
  height: 100vh;
  display: flex;
  align-items: center;
}

.home-approach.is-seq .approach-seq__pinned {
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  position: absolute;
  inset: 0;
  align-content: center;
  width: 100%;
}

.home-approach.is-seq .approach-seq__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-approach.is-seq .approach-seq__viewport { overflow: hidden; width: 100%; }

.home-approach.is-seq .approach-seq__track {
  display: flex;
  grid-template-columns: none;
  gap: var(--space-5);
  width: max-content;
  will-change: transform;
}

.home-approach.is-seq .approach-seq__point {
  width: min(340px, 70vw);
  flex-shrink: 0;
}

.home-approach.is-seq .approach-seq__num { font-size: var(--fs-48); }

.home-approach.is-seq .approach-seq__point-title { font-size: var(--fs-22); }

/* =========================================================================
 * CTA — "Ready to shape your story" exploding/floating 3D shapes
 * ========================================================================= */
.home-cta > div:not(.cta-shapes) { position: relative; z-index: 2; }

.cta-shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cta-shape {
  position: absolute;
  opacity: 0;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.2) rotate(var(--r, 0deg));
  transition: transform 1s var(--ease-spring), opacity 0.6s var(--ease-out);
  will-change: transform, opacity;
}

.cta-shapes.is-exploded .cta-shape {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(var(--r, 0deg));
}

.cta-shape__inner { display: block; }
.cta-shapes.is-exploded .cta-shape__inner {
  animation: ardent-cta-float var(--dur, 6s) var(--ease-in-out) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes ardent-cta-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(5deg); }
}

/* Placement + look of each shape */
.cta-shape--dots { top: 26px; left: 28px; --tx: 150px; --ty: 120px; --delay: 0.05s; --dur: 7.5s; }
.cta-shape--dots .cta-shape__inner {
  width: 66px; height: 66px;
  color: rgba(255, 255, 255, 0.55);
  background-image: radial-gradient(currentColor 2px, transparent 2.6px);
  background-size: 16px 16px;
}

.cta-shape--ring { top: 30px; right: 34px; --tx: -180px; --ty: 110px; --delay: 0.12s; --dur: 6.8s; }
.cta-shape--ring .cta-shape__inner {
  width: 72px; height: 72px; border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
}

.cta-shape--square { right: 40px; bottom: 32px; --tx: -160px; --ty: -100px; --r: 14deg; --delay: 0.22s; --dur: 7.2s; }
.cta-shape--square .cta-shape__inner {
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.45));
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.3);
}

.cta-shape--triangle { left: 36px; bottom: 36px; --tx: 150px; --ty: -110px; --delay: 0.28s; --dur: 8s; }
.cta-shape--triangle .cta-shape__inner {
  width: 0; height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 38px solid rgba(255, 255, 255, 0.72);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.25));
}

@media (max-width: 900px) {
  .cta-shape--triangle,
  .cta-shape--dots { display: none; }
}

@media (max-width: 600px) {
  .cta-shape--ring,
  .cta-shape--square { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-shape { transition: none; }
  .cta-shapes.is-exploded .cta-shape__inner { animation: none; }
}