/*
 * 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);
}

/* Balanced via .grid-balanced (layout/grid.css). */
.home-services__grid {
  --grid-gap: var(--space-5);
  max-width: calc(var(--cols) * 400px);
  margin-inline: auto;
}

/* 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; }
}

/* ---- Trophies (awards) ------------------------------------------------- */

.home-trophies {
  background-color: var(--color-mist);
}

/* Balanced rows via .grid-balanced (layout/grid.css); the column count comes
   from the template so four awards sit in one row and larger sets stay even. */
.home-trophies__grid {
  --grid-gap: var(--space-6);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: calc(var(--cols) * 400px);
}

/* Phones: a swipeable row instead of a long single-column stack. */
@media (max-width: 600px) {
  .home-trophies__grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--space-2) var(--gutter) var(--space-5);
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .home-trophies__grid::-webkit-scrollbar { display: none; }
  .home-trophies__grid > .home-trophies__item {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }
}

/* Perspective lives on the item so the card's media can tilt in 3D space. */
.home-trophies__item {
  perspective: 900px;
}

.trophy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: var(--space-3) var(--space-3) var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-300) var(--ease-out),
    box-shadow var(--dur-300) var(--ease-out),
    border-color var(--dur-300) var(--ease-out);
}

a.trophy:hover,
a.trophy:focus-visible {
  transform: translateY(-6px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}

/* Stage for the artwork — a soft amber pool so cut-out trophy shots and 3D
   models both sit on the same ground. */
.trophy__media {
  position: relative;
  align-self: stretch;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 50% 35%, var(--color-accent-50), var(--color-mist) 72%);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--dur-500) var(--ease-out);
}

/* Dark / brand stages, chosen per trophy in Theme Settings, for artwork with
   white or light text that would vanish on the default amber-on-mist pool. */
.trophy--dark .trophy__media {
  background: radial-gradient(circle at 50% 30%, var(--color-slate-700), var(--color-ink) 75%);
}

.trophy--brand .trophy__media {
  background: radial-gradient(circle at 50% 30%, var(--color-primary-light), var(--color-primary-dark) 75%);
}

.trophy--dark .trophy__loader,
.trophy--brand .trophy__loader { background: rgba(255, 255, 255, 0.18); }

/* 3D trophies are upright objects — give them a square stage. */
.trophy--3d .trophy__media { aspect-ratio: 1 / 1; }

/* While the cursor is on the card the tilt is written every frame, so the
   transition above is dropped — otherwise each write eases over 500ms and the
   card visibly trails the pointer. It comes back for the return to flat. */
.trophy__media.is-tilting {
  transition: none;
}

.trophy__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-2);
  transition: opacity var(--dur-500) var(--ease-out);
}

/* The model sits on top of the image and is invisible until it has actually
   loaded, so a slow or failed download is never a blank box — the image simply
   stays. It is also decorative chrome inside a link: pointer-events stay with
   the card so hover tracking is uninterrupted and clicks reach the anchor. */
.trophy__model {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-500) var(--ease-out);
  --poster-color: transparent;
}

.trophy.is-model-ready .trophy__model { opacity: 1; }

/* Hand over from image to model once the model can carry the card. */
.trophy.is-model-ready .trophy__img { opacity: 0; }

/* Load progress. Held back by a delay so quick loads never flash a bar —
   it only appears for the downloads long enough to need explaining. */
.trophy__loader {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(15, 27, 34, 0.10);
  opacity: 0;
  transition: opacity var(--dur-200) var(--ease-out);
}

.trophy.is-loading .trophy__loader {
  opacity: 1;
  transition-delay: 500ms;
}

.trophy__loader-bar {
  display: block;
  width: var(--trophy-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width var(--dur-200) linear;
}

.trophy__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding-inline: var(--space-2);
}

.trophy__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
}

.trophy__text {
  color: var(--color-text-muted);
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

/* Push the link to the bottom so cards with uneven copy still line up. */
.trophy__link {
  margin-top: auto;
}

a.trophy:hover .trophy__link,
a.trophy:focus-visible .trophy__link {
  color: var(--color-accent);
  gap: var(--space-3);
}

a.trophy:hover .trophy__link .icon {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .trophy,
  .trophy__media { transition: none; }
  a.trophy:hover { transform: none; }
}

/* ---- Ranking (featured recognition, under Trophies) --------------------- */

.home-ranking__inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-8);
  max-width: 1040px;
  margin-inline: auto;
}

.home-ranking__head {
  max-width: 820px;
  text-align: center;
}

.home-ranking__text {
  color: var(--color-text-muted);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
}

.home-ranking__text + .home-ranking__text {
  margin-top: var(--space-4);
}

.home-ranking__media {
  width: 100%;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.home-ranking__media img {
  display: block;
  width: 100%;
  height: auto;
}

.home-ranking__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
}

/* ---- Awards (above Trophies) --------------------- */

.home-abp__inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-8);
  max-width: 1040px;
  margin-inline: auto;
}

@media (min-width:1024px) {
  .home-abp__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;  
  }
  .home-abp__inner .section__title {
    font-size: var(--fs-42);
  }
}

.home-abp__head {
  max-width: 820px;
  text-align: center;
}


.home-abp__text {
  color: var(--color-text-muted);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
}

.home-abp__text + .home-abp__text {
  margin-top: var(--space-4);
}

.home-abp__media {
  width: 75%;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@media (min-width:1024px) {
  .home-abp__media {
    width: 100%;
  }
}

.home-abp__media img {
  display: block;
  width: 100%;
  height: auto;
}