﻿/*
  HOME PAGE MODULE
  ================
  Existing home styles remain in legacy.css during migration.
  Add future homepage-only rules here, scoped with body.home-page.
*/

body.home-page {
  --page-accent: var(--color-brand-red);
}


/* =========================================================
   HOME — R3 / CONTACT DOUBLE BLOCK
   Fleet sonrası, footer öncesi iki ekranlık yeni sahne.
========================================================= */
body.home-page .home-r3-contact {
  --home-r3-screen: calc(100vw - var(--rail-w));
  --home-r3-total: calc(var(--home-r3-screen) * 2.5);
  --home-r3-left-screen: calc(var(--home-r3-screen) * 1.5);
  --home-r3-right-screen: var(--home-r3-screen);
  --home-r3-gap: clamp(36px, 3.2vw, 72px);
  --home-r3-side-pad: clamp(86px, 6.4vw, 146px);
  --home-r3-title-shift: clamp(56px, 4.2vw, 92px);
  --home-r3-seam-color: 24, 26, 63;
  position: relative;
  width: var(--home-r3-total);
  min-width: var(--home-r3-total);
  flex: 0 0 var(--home-r3-total);
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  color: #f4f3f0;
  background: #08112c;
}

body.home-page .home-r3-contact__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

body.home-page .home-r3-contact__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.home-page .home-r3-contact__bg--left {
  left: 0;
  width: var(--home-r3-left-screen);
}

body.home-page .home-r3-contact__bg--left::after {
  background: linear-gradient(90deg, rgba(var(--home-r3-seam-color), 0) 70%, rgba(var(--home-r3-seam-color), .82) 100%);
}

body.home-page .home-r3-contact__bg--right {
  left: var(--home-r3-left-screen);
  width: var(--home-r3-right-screen);
}

body.home-page .home-r3-contact__bg--right::after {
  background: linear-gradient(90deg, rgba(var(--home-r3-seam-color), .82) 0%, rgba(var(--home-r3-seam-color), 0) 30%);
}

body.home-page .home-r3-contact__bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.home-page .home-r3-contact__logo-group,
body.home-page .home-r3-contact__rotor,
body.home-page .home-r3-contact__copy,
body.home-page .home-r3-contact__contact-stage {
  position: absolute;
  z-index: 2;
}

body.home-page .home-r3-contact__logo-group {
  top: 50%;
  left: calc(var(--home-r3-side-pad) + clamp(138px, 8vw, 220px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 2.8vw, 40px);
  isolation: isolate;
  opacity: 0;
  transform: translate3d(-22px, -50%, 0);
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform 1.05s cubic-bezier(.16,.84,.31,1);
  will-change: opacity, transform;
}

body.home-page .home-r3-contact.is-r3-logo-revealed .home-r3-contact__logo-group {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

body.home-page .home-r3-contact__logo {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(140px, 15vw, 250px);
  height: auto;
}

body.home-page .home-r3-contact__discover {
  position: relative;
  z-index: 2;
  min-width: 150px;
  min-height: 50px;
}

body.home-page .home-r3-contact__ring {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

body.home-page .home-r3-contact__ring path {
  fill: none;
  stroke: rgba(180, 154, 92, .9);
  stroke-width: .9px;
  vector-effect: non-scaling-stroke;
}

body.home-page .home-r3-contact__ring--logo {
  top: 50%;
  left: 50%;
  width: clamp(700px, 46vw, 980px);
  height: clamp(920px, 74vh, 1280px);
  transform: translate(-21%, -50%) scaleX(-1);
  z-index: -1;
}

body.home-page .home-r3-contact__rotor {
  top: 50%;
  left: calc(var(--home-r3-left-screen) - clamp(820px, 47vw, 1080px));
  width: clamp(520px, 36vw, 760px);
  margin: 0;
  transform: translate(-50%, -50%);
}

body.home-page .home-r3-contact__rotor img {
  display: block;
  width: 100%;
  height: auto;
  animation: homeR3RotorSpin 28s linear infinite;
  transform-origin: center center;
  filter: drop-shadow(20px 28px 30px rgba(0,0,0,.22));
}

body.home-page .home-r3-contact__copy {
  top: 50%;
  left: var(--home-r3-left-screen);
  width: min(64vw, 1280px);
  transform: translate(-50%, -50%);
}

body.home-page .home-r3-contact__topics {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(34px, 2.8vw, 72px);
  margin-bottom: 16px;
}

body.home-page .home-r3-contact__topics span {
  color: #b49a5c;
  font-size: clamp(22px, 1.9vw, 38px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.home-page .home-r3-contact__copy p {
  margin: 0;
  color: #ffffff;
  font-size: clamp(12px, 1.5vw, 30px);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .01em;
  max-width: none;
  white-space: nowrap;
}

/* CONTACT stage is deliberately independent from the link. The arc no longer
   inherits the CONTACT hover geometry / letter-spacing change. */
body.home-page .home-r3-contact__contact-stage {
  top: 50%;
  right: calc(var(--home-r3-side-pad) + clamp(116px, 8vw, 190px));
  z-index: 3;
  width: clamp(360px, 28vw, 560px);
  height: clamp(920px, 74vh, 1280px);
  isolation: isolate;
  pointer-events: none;
  transform: translateY(-50%);
}

body.home-page .home-r3-contact__contact-title {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #b49a5c;
  font-size: clamp(52px, 4.4vw, 96px);
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  transition:
    color .28s var(--ease-standard),
    letter-spacing .28s var(--ease-standard);
}

/* Same right-side reveal language as the Philosophy title. */
body.home-page .home-r3-contact__contact-title::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .85;
  transform-origin: left center;
  transition:
    width .34s cubic-bezier(.22,.61,.36,1),
    opacity .26s var(--ease-standard);
}

body.home-page .home-r3-contact__contact-title:hover {
  color: #f4f3f0;
  letter-spacing: .035em;
}

body.home-page .home-r3-contact__contact-title:hover::after {
  width: 54px;
  opacity: 1;
}

body.home-page .home-r3-contact__ring--contact {
  top: 50%;
  left: calc(100% - clamp(82px, 6vw, 124px));
  width: clamp(700px, 46vw, 980px);
  height: clamp(920px, 74vh, 1280px);
  transform: translate(-75%, -50%);
  z-index: 0;
}

@keyframes homeR3RotorSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
  body.home-page .home-r3-contact {
    width: 100%;
    flex-basis: 100%;
    min-height: 1380px;
    background: #0a1028;
  }

  body.home-page .home-r3-contact__bg--left,
  body.home-page .home-r3-contact__bg--right {
    left: 0;
    width: 100%;
    height: 50%;
  }

  body.home-page .home-r3-contact__bg--right {
    top: 50%;
    bottom: auto;
  }

  body.home-page .home-r3-contact__logo-group {
    top: 150px;
    left: 44px;
    right: 24px;
    transform: translate3d(-18px, 0, 0);
    gap: 24px;
  }

  body.home-page .home-r3-contact.is-r3-logo-revealed .home-r3-contact__logo-group {
    transform: translate3d(0, 0, 0);
  }

  body.home-page .home-r3-contact__logo {
    width: min(160px, 42vw);
  }

  body.home-page .home-r3-contact__ring--logo {
    width: 360px;
    height: 360px;
    transform: translate(-34%, -42%) scaleX(-1);
  }

  body.home-page .home-r3-contact__rotor {
    top: 34%;
    left: 42%;
    width: min(82vw, 480px);
    transform: translate(-50%, -50%);
  }

  body.home-page .home-r3-contact__copy {
    top: auto;
    left: 24px;
    right: 24px;
    bottom: 20%;
    width: auto;
    transform: none;
  }

  body.home-page .home-r3-contact__topics {
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-bottom: 18px;
  }

  body.home-page .home-r3-contact__topics span {
    font-size: clamp(18px, 5.1vw, 26px);
    line-height: 1;
    letter-spacing: .06em;
  }

  body.home-page .home-r3-contact__copy p {
    white-space: normal;
  }

  body.home-page .home-r3-contact__contact-stage {
    top: auto;
    right: 24px;
    bottom: 26px;
    width: 340px;
    height: 420px;
    transform: none;
  }

  body.home-page .home-r3-contact__contact-title {
    top: 50%;
    right: 0;
    bottom: auto;
    font-size: clamp(42px, 10.5vw, 72px);
    transform: translateY(-50%);
  }

  body.home-page .home-r3-contact__ring--contact {
    left: calc(100% - 60px);
    width: 340px;
    height: 420px;
    transform: translate(-75%, -50%);
  }
}


@media (prefers-reduced-motion: reduce) {
  body.home-page .home-r3-contact__logo-group,
  body.home-page .home-r3-contact.is-r3-logo-revealed .home-r3-contact__logo-group {
    opacity: 1;
    transform: translateY(-50%);
    transition: none;
  }

  body.home-page .home-r3-contact__rotor img {
    animation: none;
  }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  body.home-page .home-r3-contact__logo-group,
  body.home-page .home-r3-contact.is-r3-logo-revealed .home-r3-contact__logo-group {
    transform: none;
  }
}


/* =========================================================
   HOME — CONTACT ENQUIRY STAGE
   Terminal home form stage: follows the CONTACT title and precedes footer.
========================================================= */
body.home-page .home-contact-enquiry {
  --home-contact-navy: #181a3f;
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: #ffffff;
  background:
    var(--dot-grid-dark),
    #0d1230;
  background-size: var(--dot-grid-size), auto;
}

/* RMK blue gradient runs from the far left through the address side and fades as it reaches the form column. */
body.home-page .home-contact-enquiry::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 61%;
  pointer-events: none;
  background: linear-gradient(90deg, var(--home-contact-navy) 0%, var(--home-contact-navy) 60%, rgba(24,26,63,0) 100%);
}

body.home-page .home-contact-enquiry::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.018), transparent 38%, rgba(0,0,0,.08));
}

body.home-page .home-contact-enquiry__layout {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  height: 100%;
  margin: 0 auto;
  padding: clamp(58px, 7vh, 112px) 0 clamp(44px, 6vh, 92px);
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(430px, 1.15fr);
  align-items: center;
  gap: clamp(54px, 8vw, 160px);
}

/* Same vertical alignment contract as Contact > Enquiry. */
body.home-page .home-contact-enquiry__address {
  align-self: center;
  min-height: 0;
  padding: 42px 0;
}

body.home-page .home-contact-enquiry__form-area {
  min-width: 0;
}

body.home-page .home-contact-enquiry__tabs {
  position: relative;
  min-height: 0;
  padding-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 2.2vw, 48px);
  color: #ffffff;
}

/* Keeps the rule at the exact same 14px gap used by Address. */
body.home-page .home-contact-enquiry__tabs::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 1px;
  background: rgba(255,255,255,.72);
}

body.home-page .home-contact-enquiry__tab {
  color: #ffffff;
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  transition: color .24s var(--ease-standard), transform .24s var(--ease-standard);
}

body.home-page .home-contact-enquiry__tab.is-current {
  color: var(--color-r3-red);
  font-weight: 400;
}

body.home-page .home-contact-enquiry__tab:not(.is-current):hover,
body.home-page .home-contact-enquiry__tab:not(.is-current):focus-visible {
  color: var(--color-r3-red);
  outline: none;
  transform: translateX(3px);
}

/* Preserve the original Contact > Enquiry form controls and bottom-button alignment. */
body.home-page .home-contact-enquiry .contact-form {
  width: 100%;
  max-width: 640px;
  margin-top: clamp(34px, 4vh, 54px);
}

/* Homepage-only footer surface. Other pages retain the global footer surface. */
body.home-page .footer-panel {
  color: #ffffff;
  background: #181a3f !important;
}

body.home-page .footer-top,
body.home-page .footer-links a {
  color: #ffffff;
}

body.home-page .footer-links a:hover,
body.home-page .footer-links a:focus-visible {
  color: var(--color-r3-red);
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.home-page .home-contact-enquiry__layout {
    width: min(100% - 88px, 980px);
    grid-template-columns: minmax(230px, .82fr) minmax(400px, 1.18fr);
    gap: 46px;
  }

  body.home-page .home-contact-enquiry__tabs {
    gap: 20px;
  }
}

@media (max-width: 1100px) {
  body.home-page .home-contact-enquiry {
    min-height: auto;
    overflow: visible;
  }

  body.home-page .home-contact-enquiry::before {
    width: 100%;
    height: 45%;
    inset: 0 0 auto 0;
    background: linear-gradient(180deg, var(--home-contact-navy) 0%, rgba(24,26,63,0) 100%);
  }

  body.home-page .home-contact-enquiry__layout {
    width: auto;
    height: auto;
    margin: 0;
    padding: 76px 24px 68px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 52px;
  }

  body.home-page .home-contact-enquiry__address {
    align-self: auto;
    min-height: auto;
    padding: 0;
  }

  body.home-page .home-contact-enquiry__tabs {
    min-height: 0;
    padding-bottom: 14px;
    flex-wrap: wrap;
    gap: 16px 24px;
  }

  body.home-page .home-contact-enquiry__tab {
    font-size: clamp(16px, 4.6vw, 21px);
  }

  body.home-page .home-contact-enquiry .contact-form {
    max-width: none;
    margin-top: 32px;
  }
}


/* =========================================================
   HOME ENQUIRY v98 — same footer surface, persistent points,
   and a left-to-form RMK-navy fade.
========================================================= */
body.home-page .home-contact-enquiry {
  --home-contact-navy: #181a3f;
  --home-contact-fade: #0f1538;
  background: var(--dot-grid-dark), var(--home-contact-navy) !important;
  background-size: var(--dot-grid-size), auto !important;
}

body.home-page .home-contact-enquiry::before {
  width: 64% !important;
  background: linear-gradient(
    90deg,
    rgba(15, 21, 56, .92) 0%,
    rgba(15, 21, 56, .78) 56%,
    rgba(15, 21, 56, 0) 100%
  ) !important;
}

/* Point texture remains visible across the complete enquiry stage. */
body.home-page .home-contact-enquiry::after {
  background:
    var(--dot-grid-dark),
    linear-gradient(90deg, rgba(255,255,255,.012), transparent 38%, rgba(0,0,0,.045)) !important;
  background-size: var(--dot-grid-size), auto !important;
}

/* The form grid and its original width are deliberately not widened. */
body.home-page .home-contact-enquiry__layout {
  width: min(100%, 1240px) !important;
  grid-template-columns: minmax(260px, .9fr) minmax(430px, 1.15fr) !important;
  align-items: center !important;
  gap: clamp(54px, 8vw, 160px) !important;
}

body.home-page .home-contact-enquiry .contact-form {
  width: 100% !important;
  max-width: 640px !important;
}

@media (max-width: 1100px) {
  body.home-page .home-contact-enquiry::before {
    width: 100% !important;
    height: 45% !important;
    inset: 0 0 auto 0 !important;
    background: linear-gradient(180deg, rgba(15, 21, 56, .92) 0%, rgba(15, 21, 56, 0) 100%) !important;
  }

  body.home-page .home-contact-enquiry__layout {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 76px 24px 68px !important;
    grid-template-columns: 1fr !important;
    gap: 52px !important;
  }

  body.home-page .home-contact-enquiry__address {
    align-self: auto !important;
  }

  body.home-page .home-contact-enquiry .contact-form {
    max-width: none !important;
    margin-top: 32px !important;
  }
}


/* V100 — HOME PHILOSOPHY TITLE REVEAL */
body.home-page .philosophy-left-title {
  opacity: 0;
  transform: translate3d(-30px, -50%, 0);
  transition:
    opacity .72s cubic-bezier(.22, .61, .36, 1) .10s,
    transform .92s cubic-bezier(.16, .84, .31, 1) .10s;
}

body.home-page .philosophy.is-philosophy-title-revealed .philosophy-left-title {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

@media (max-width: 1100px) {
  body.home-page .philosophy-left-title {
    transform: translate3d(-22px, 0, 0);
  }

  body.home-page .philosophy.is-philosophy-title-revealed .philosophy-left-title {
    transform: translate3d(0, 0, 0);
  }
}


/* =========================================================
   V101 — HOME TARGETED REFINEMENTS
========================================================= */
/* The Philosophy title is latched by main.js when the scene is first reached.
   It does not reset when the visitor scrolls back from later scenes. */
body.home-page .philosophy.is-philosophy-title-revealed .philosophy-left-title {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

@media (max-width: 1100px) {
  body.home-page .philosophy.is-philosophy-title-revealed .philosophy-left-title {
    transform: translate3d(0, 0, 0);
  }
}

/* The R3 rotor needs a wider safety corridor on every desktop tier. */
body.home-page .home-r3-contact__rotor {
  left: calc(var(--home-r3-left-screen) - clamp(1230px, 70.5vw, 1620px));
}

@media (min-width: 1101px) and (max-width: 1599px) {
  body.home-page .home-r3-contact__rotor {
    left: calc(var(--home-r3-left-screen) - clamp(975px, 58.5vw, 1290px));
  }
}

@media (min-width: 2200px) {
  body.home-page .home-r3-contact__rotor {
    left: calc(var(--home-r3-left-screen) - clamp(1350px, 76.5vw, 1980px));
  }
}

/* Home enquiry shares the Contact > Enquiry surface, point language and measured form width. */
body.home-page .home-contact-enquiry {
  background: linear-gradient(90deg, rgba(30,31,61,.98) 0%, rgba(26,28,61,.98) 52%, rgba(24,26,63,.98) 100%) !important;
}

body.home-page .home-contact-enquiry::before {
  width: 64% !important;
  background: linear-gradient(90deg, rgba(30,31,61,.76) 0%, rgba(26,28,61,.52) 58%, rgba(24,26,63,0) 100%) !important;
}

body.home-page .home-contact-enquiry::after {
  background:
    radial-gradient(circle at 16% 28%, rgba(255,255,255,.025) 0 1px, transparent 1.4px),
    linear-gradient(90deg, rgba(255,255,255,.018), transparent 38%, rgba(0,0,0,.06)) !important;
  background-size: 28px 28px, auto !important;
}

body.home-page .home-contact-enquiry__layout {
  width: min(100%, 1240px) !important;
  grid-template-columns: minmax(260px, .9fr) minmax(430px, 1.15fr) !important;
  gap: clamp(54px, 8vw, 160px) !important;
}

body.home-page .home-contact-enquiry__form-area {
  width: 100%;
  max-width: 640px;
}

body.home-page .home-contact-enquiry .contact-form {
  width: 100% !important;
  max-width: none !important;
}

/* The Discover visual remains completely static on hover. */
body.home-page .discover-media img,
body.home-page .discover-section:hover .discover-media img {
  transform: scale(1.02) !important;
  transition: none !important;
}

/* V101 — Heritage copy remains on its original left edge but uses a three-times wider reading corridor. */
@media (min-width: 1101px) {
  body.home-page .heritage-journey {
    --heritage-copy-w: clamp(840px, 57vw, 1575px);
  }

  body.home-page .heritage-journey .heritage-stage--copy {
    width: var(--heritage-copy-w) !important;
    flex: 0 0 var(--heritage-copy-w) !important;
  }

  body.home-page .heritage-journey .heritage-copy {
    width: var(--heritage-copy-w) !important;
    max-width: var(--heritage-copy-w) !important;
  }
}


/* =========================================================
   V102 — HOME ENQUIRY FORM PARITY
   The home panel uses the exact Contact > Enquiry control language.
========================================================= */
body.home-page .home-contact-enquiry .contact-form__submit {
  color: #ffffff !important;
  background: var(--contact-red, #ff443d) !important;
}

body.home-page .home-contact-enquiry .contact-form__submit:hover,
body.home-page .home-contact-enquiry .contact-form__submit:focus-visible {
  color: var(--contact-red, #ff443d) !important;
  background: #ffffff !important;
}


/* V103_2: Home form uses Contact's exact controls and the shared modal source. */
body.home-page .home-contact-enquiry .contact-form {
  width: 100% !important;
  max-width: 640px !important;
}
