/* =========================================================
   YUSUF & SÖHNE — ART DIRECTION V3
   One visual override layer. Motion is controlled by art-direction-v3.js.
   The goal is continuous composition: no "pop-in" cards, no double reveals.
   ========================================================= */

:root{
  --ys-v3-warm:#f7f3ed;
  --ys-v3-paper:#fbfaf8;
  --ys-v3-ink:#1c1a18;
  --ys-v3-line:rgba(49,43,37,.10);
  --ys-v3-radius:32px;
}

/* Kill legacy hidden states. V3 never hides real content before JS runs. */
.ys-reveal{opacity:1!important;transform:none!important}
.ys-image-reveal{clip-path:none!important;opacity:1!important}

/* Section construction line. It is decorative and never affects layout. */
.ys-chapter{position:relative;isolation:isolate}
.ys-section-sweep{
  position:absolute;z-index:4;left:max(16px,calc((100% - var(--ys-container,1240px))/2));
  right:max(16px,calc((100% - var(--ys-container,1240px))/2));top:0;height:1px;
  overflow:hidden;pointer-events:none;opacity:.7;
}
.ys-section-sweep:before{
  content:'';display:block;width:100%;height:100%;transform:scaleX(var(--ys-sweep,0));
  transform-origin:left center;background:linear-gradient(90deg,rgba(240,90,19,.52),rgba(38,33,29,.11) 38%,transparent 92%);
}
.ys-chapter-index{
  position:absolute;z-index:5;right:max(18px,calc((100% - var(--ys-container,1240px))/2));top:18px;
  color:rgba(57,50,44,.33);font-size:.58rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;
}

/* Cinematic curtain: image exists from the start; a material surface moves away. */
.ys-curtain-host{position:relative;isolation:isolate;overflow:hidden}
.ys-media-curtain{
  position:absolute;z-index:8;inset:-2px;pointer-events:none;
  background:linear-gradient(100deg,#f7f3ed 0%,#fbfaf8 72%,#fff 94%,rgba(240,90,19,.14) 100%);
  box-shadow:-12px 0 32px rgba(35,29,24,.06);
  will-change:transform;
}
.ys-curtain-from-left .ys-media-curtain{
  background:linear-gradient(260deg,#f7f3ed 0%,#fbfaf8 72%,#fff 94%,rgba(240,90,19,.14) 100%);
  box-shadow:12px 0 32px rgba(35,29,24,.06);
}
.ys-curtain-host img{will-change:transform}

/* Small factual badge: real project photography becomes part of the identity. */
.ys-media-proof{
  position:absolute;z-index:7;right:13px;top:13px;display:inline-flex;align-items:center;gap:7px;
  padding:8px 10px;border:1px solid rgba(255,255,255,.62);border-radius:999px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(12px) saturate(145%);
  -webkit-backdrop-filter:blur(12px) saturate(145%);box-shadow:0 8px 24px rgba(22,19,16,.08);
  color:#4c4741;font-size:.54rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase;
}
.ys-media-proof:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ys-orange);box-shadow:0 0 0 4px rgba(240,90,19,.10)}

/* Titles gain a quiet piece of architecture instead of another fade. */
.ys-title-rail{display:block;width:46px;height:2px;margin:17px 0 0;background:#ddd5cb;overflow:hidden;border-radius:999px}
.ys-title-rail>span{display:block;width:100%;height:100%;transform:scaleX(var(--ys-title-progress,0));transform-origin:left;background:var(--ys-orange)}
.ys-content.center .ys-title-rail{margin-left:auto;margin-right:auto}
.ys-content.right .ys-title-rail,.ys-editorial.reverse .ys-title-rail{margin-left:auto}

/* Avoid the slider 'active card pop'. Keep depth, but continuous. */
.ys-project-slide{transition:opacity .48s ease,transform .48s cubic-bezier(.22,.61,.36,1)!important}

@media (max-width:820px){
  :root{--ys-v3-radius:28px}

  /* More editorial section pacing. */
  .ys-section,.ys-section-air{padding-top:84px!important;padding-bottom:84px!important}
  .ys-section-compact{padding-top:56px!important;padding-bottom:56px!important}
  .ys-chapter-index{top:20px;right:16px;font-size:.52rem}
  .ys-section-sweep{left:16px;right:16px}

  /* Hero feels continuous: picture stays alive while white layer recedes. */
  .ys-hero-overlay,.ys-page-hero-overlay{will-change:opacity,transform}
  .ys-hero-copy,.ys-page-hero-copy{will-change:transform}
  .ys-hero-media img,.ys-page-hero-media img{will-change:transform}

  /* First-level editorial images deliberately break the card grid. */
  .ys-editorial:not(.reverse)>.ys-media-frame{
    width:calc(100% + 16px)!important;margin-left:-16px!important;margin-right:0!important;
    border-radius:0 30px 30px 0!important;box-shadow:0 22px 62px rgba(31,27,22,.10)!important;
  }
  .ys-editorial.reverse>.ys-media-frame{
    width:calc(100% + 16px)!important;margin-left:0!important;margin-right:-16px!important;
    border-radius:30px 0 0 30px!important;box-shadow:0 22px 62px rgba(31,27,22,.10)!important;
  }
  .ys-editorial:not(.reverse)>.ys-media-frame:after{border-radius:0 30px 30px 0!important}
  .ys-editorial.reverse>.ys-media-frame:after{border-radius:30px 0 0 30px!important}
  .ys-editorial>.ys-media-frame .ys-media-curtain{border-radius:inherit}

  /* Dual-image compositions now overlap like an editorial spread. */
  .ys-media-stack{
    position:relative!important;display:block!important;padding-bottom:72px!important;min-height:520px;
  }
  .ys-media-stack .ys-media-frame:first-child{
    width:calc(100% + 16px)!important;min-height:385px!important;margin-right:-16px!important;margin-left:0!important;
    border-radius:30px 0 0 30px!important;
  }
  .ys-media-stack .ys-media-frame:last-child{
    position:absolute!important;z-index:6;left:-8px!important;bottom:0!important;width:72%!important;min-height:225px!important;
    margin:0!important;border:7px solid var(--ys-v3-paper)!important;border-radius:24px!important;
    box-shadow:0 24px 60px rgba(30,25,21,.16)!important;
  }
  .ys-media-stack .ys-media-frame:last-child img{object-position:center}

  /* Captions/proof become material, not badges floating everywhere. */
  .ys-media-caption{left:13px!important;bottom:13px!important;box-shadow:0 8px 24px rgba(22,19,16,.07)}
  .ys-media-proof{top:12px;right:12px;padding:7px 9px;font-size:.49rem}

  /* Copy blocks have more confidence and less 'centered card' feeling. */
  .ys-editorial .ys-content{padding:0 2px}
  .ys-editorial.reverse .ys-content{padding-left:30px}
  .ys-editorial:not(.reverse) .ys-content{padding-right:26px}
  .ys-editorial .ys-h2{line-height:.97!important;letter-spacing:-.052em!important}
  .ys-editorial .ys-copy{font-size:.96rem!important;line-height:1.72!important}

  /* Service rail feels like a material strip, not six pop cards. */
  .ys-service-card{transform:none!important;opacity:1!important}
  .ys-service-card:active{transform:translateY(1px)!important}

  /* No pop on project cards; slight vertical depth only. */
  .ys-project-slide{opacity:.72!important;transform:translateY(7px)!important}
  .ys-project-slide.swiper-slide-active{opacity:1!important;transform:translateY(0)!important}
  .ys-project-card-media{min-height:320px!important}

  /* Statement becomes a true pause in the page. */
  .ys-statement{border-radius:30px!important;margin:10px 10px 20px!important;width:calc(100% - 20px)!important}
  .ys-statement .ys-h2{max-width:10.4em;margin-inline:auto}

  /* Human-story picture bleeds into the card instead of reading as another tile. */
  .ys-manifesto{margin-inline:-2px!important;border-radius:30px!important}
  .ys-manifesto-media{min-height:455px!important}
  .ys-manifesto-copy{position:relative;padding:38px 25px 42px!important}
  .ys-manifesto-copy:before{content:'';position:absolute;top:0;left:25px;width:58px;height:2px;background:var(--ys-orange)}

  /* Dark beat / CTA feel bigger and more deliberate. */
  .ys-dark-band{border-radius:28px!important;padding:29px 25px!important}
  .ys-cta{border-radius:30px!important;min-height:620px!important}

  /* Prevent extra motion layers from fighting on touch. */
  .ys-parallax{transform:none}
}

@media (min-width:821px){
  /* Desktop also uses curtain reveal; keep geometry quieter than mobile. */
  .ys-media-curtain{border-radius:inherit}
  .ys-project-slide{opacity:.78;transform:translateY(8px) scale(.99)}
  .ys-project-slide.swiper-slide-active{opacity:1;transform:translateY(0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .ys-media-curtain{display:none!important}
  .ys-section-sweep:before,.ys-title-rail>span{transform:none!important}
  .ys-project-slide{opacity:1!important;transform:none!important}
}