/* Shaila Rizvi - enhancement layer
   Preserves Webflow brand: editorial serif, photography, rose accent */

:root {
  --sr-ink: #0a0908;
  --sr-paper: #f7f3ee;
  --sr-rose: #c43b6e;
  --sr-rose-soft: rgba(196, 59, 110, 0.35);
  --sr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* CMS-injected case study cover */
.sr-cms-cover-link {
  display: block;
  overflow: hidden;
  margin-top: 1.25rem;
}

.sr-cms-cover-link .showcase-img {
  width: 100%;
  transition: transform 1.1s var(--sr-ease);
}

.sr-cms-cover-link:hover .showcase-img {
  transform: scale(1.03);
}

.sr-cms-case .marque-link {
  display: inline-flex;
  margin-top: 0.75rem;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Preloader */
.preloder {
  transition: opacity 0.85s var(--sr-ease), visibility 0.85s var(--sr-ease);
}

body.sr-ready .preloder {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.preloder .lottie-animation {
  filter: drop-shadow(0 0 18px var(--sr-rose-soft));
}

/* Soft film grain + vignette over the page */
.sr-atmosphere {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sr-vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: radial-gradient(
    ellipse 75% 65% at 50% 40%,
    transparent 40%,
    rgba(0, 0, 0, 0.28) 100%
  );
  opacity: 0.55;
  transition: opacity 0.6s var(--sr-ease);
}

body.sr-scrolled .sr-vignette {
  opacity: 0.25;
}

/* Hero */
.section.is-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.32) 0%,
    transparent 34%,
    transparent 58%,
    rgba(0, 0, 0, 0.42) 100%
  );
}

/* Keep Webflow absolute positioning - only raise stacking where needed */
.section.is-hero .hero-wrappar {
  z-index: 2;
}

/* Hero slider must fill the viewport; Webflow default .w-slider is grey #ddd */
.section.is-hero .slider.w-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #111;
  z-index: 0;
}

.section.is-hero .hero-mask.w-slider-mask {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.section.is-hero .w-slide {
  height: 100%;
  width: 100%;
}

.hero-slider-img {
  transform: scale(1.04);
  transition: transform 8s linear;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.w-slide.w-active .hero-slider-img,
.slide.w-active .hero-slider-img {
  transform: scale(1);
}

.hero-heading {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 1.1s var(--sr-ease-out),
    transform 1.1s var(--sr-ease-out),
    filter 1.1s var(--sr-ease-out);
  transition-delay: 0.35s;
}

body.sr-ready .hero-heading {
  opacity: 1;
  transform: none;
  filter: none;
}

.hero-heading .itelic-ppoe strong,
.hero-heading .itelic-ppoe {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}

/* Brand mark entrance */
.section.is-hero .navigation_wrappar {
  opacity: 0;
  transition: opacity 0.8s var(--sr-ease);
  transition-delay: 0.12s;
}

body.sr-ready .section.is-hero .navigation_wrappar {
  opacity: 1;
}

/* Menu orb */
.navigation-icon {
  transition:
    transform 0.45s var(--sr-ease),
    box-shadow 0.45s var(--sr-ease),
    background-color 0.45s var(--sr-ease) !important;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}

.navigation-icon:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12);
}

/* Scroll cue */
.scroll-down-wrap,
a[href*='#'] h3 {
  animation: sr-bob 2.4s var(--sr-ease) infinite;
}

@keyframes sr-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}

/* Scroll reveals */
.sr-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s var(--sr-ease-out),
    transform 0.9s var(--sr-ease-out);
  will-change: opacity, transform;
}

.sr-reveal.is-in {
  opacity: 1;
  transform: none;
}

.sr-reveal-delay-1 {
  transition-delay: 0.08s;
}
.sr-reveal-delay-2 {
  transition-delay: 0.16s;
}
.sr-reveal-delay-3 {
  transition-delay: 0.24s;
}

/* About */
.about-content-wrappar,
.about-top-wrap {
  transition: transform 0.6s var(--sr-ease);
}

.black-circle {
  transition:
    transform 0.55s var(--sr-ease),
    background-color 0.55s var(--sr-ease) !important;
}

.about-content-wrappar:hover .black-circle {
  transform: scale(1.06);
}

/* Case studies */
.case-study-one,
.case-study-box-wrappar,
.left-case-study {
  transition: transform 0.55s var(--sr-ease);
}

.showcase-img,
.showcase-img img,
.case-study-one img,
.cms-logo img {
  transition:
    transform 1.05s var(--sr-ease),
    filter 0.7s var(--sr-ease) !important;
  will-change: transform;
}

.case-study-grid:hover .showcase-img,
.case-study-grid:hover .showcase-img img,
.case-study-one:hover img,
.case--study-spacing:hover .showcase-img img {
  transform: scale(1.06);
  filter: brightness(1.05) contrast(1.04);
}

.case-study-heading-2,
.heading {
  transition: letter-spacing 0.45s var(--sr-ease), color 0.35s ease;
}

.case-study-grid:hover .case-study-heading-2,
.case--study-spacing:hover .case-study-heading-2 {
  letter-spacing: 0.02em;
}

.marque-link,
.cse-study-marque {
  position: relative;
}

.marque-link::after,
.marque-move {
  transition: opacity 0.4s ease, transform 0.4s var(--sr-ease);
}

.case-study-grid:hover .marque-move,
.case--study-spacing:hover .marque-move {
  transform: translateX(6px);
}

/* Soft rose underline on view CTA */
.marque-link {
  background-image: linear-gradient(var(--sr-rose), var(--sr-rose));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.45s var(--sr-ease);
}

.case-study-grid:hover .marque-link,
.case--study-spacing:hover .marque-link {
  background-size: 100% 1px;
}

/*
  About slider: sticky horizontal track must be tall enough that the
  user finishes the slide (IX2 translate) before the page moves down
  into Case Studies / Bungalow. Match live Webflow height (300vh).
*/
.horijontle-scroling-section.hide {
  height: 300vh;
  padding-top: 7vw;
  padding-bottom: 4vw;
}

.horijontle-scroling-section .div-block-10,
.horijontle-scroling-section .moving-img {
  opacity: 1 !important;
  visibility: visible !important;
}

.horijontle-scroling-section .moving-img,
.horijontle-scroling-section .text-img {
  object-fit: cover;
}

/* Horizontal showcase strip (case-study chips inside about track, if any) */
.horijontle-scroling-section .w-dyn-item,
.horijontle-scroling-section a {
  transition: transform 0.5s var(--sr-ease), opacity 0.5s ease;
}

.horijontle-scroling-section .w-dyn-item:hover,
.horijontle-scroling-section a:hover {
  transform: translateY(-6px);
}

/* Contact */
.section:has(h1),
footer,
.page-wrap {
  /* keep layout intact */
}

/* Contact heading glow */
h1 {
  text-shadow: 0 0 40px rgba(196, 59, 110, 0);
  transition: text-shadow 0.6s ease;
}

/* Nav overlay polish */
.navz-menut-open,
.expen-nav_menu {
  backdrop-filter: blur(2px);
}

.nav_link {
  transition: transform 0.4s var(--sr-ease), opacity 0.35s ease !important;
}

.nav_link:hover {
  transform: translateX(10px);
}

.nav_link:hover .nav_link-text {
  color: var(--sr-rose) !important;
}

.nav_link-text.itelic {
  opacity: 0.55;
  transition: opacity 0.35s ease, color 0.35s ease;
}

.nav_link:hover .nav_link-text.itelic {
  opacity: 1;
  color: var(--sr-paper) !important;
}

/* Case study detail pages */
.w-lightbox-backdrop {
  backdrop-filter: blur(8px);
}

/* Lightbox thumbs + journal images */
a[aria-label='open lightbox'] img,
a[aria-label='open lightbox'] {
  transition: transform 0.7s var(--sr-ease), opacity 0.4s ease !important;
}

a[aria-label='open lightbox']:hover img {
  transform: scale(1.04);
}

/* Back to home */
a[href='/'] {
  transition: opacity 0.3s ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .sr-reveal {
    opacity: 1;
    transform: none;
  }

  .hero-heading {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Mobile: lighter effects */
@media (max-width: 767px) {
  .sr-atmosphere {
    opacity: 0.03;
  }
}