/*
Theme Name: Daydreams Atelier
Theme URI: 
Author: Patrick Toch
Version: 1.0.0
Description: High-end portfolio theme with interactive scrub, angled canvas morph, and endless gallery physics.
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}




 /* -------------------------------------------------------------
       1. SYSTEM RESET & CORE
    ------------------------------------------------------------- */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    @font-face {
      font-family: 'Prosh3';
      font-style: normal;
      font-weight: normal;
      src: local('Prosh3-Coconut'),
           local('Prosh3 Coconut'),
           local('Prosh3'),
           url('./Prosh3-Coconut.woff2') format('woff2'),
           url('./Prosh3-Coconut.ttf') format('truetype');
    }

    html, body {
      width: 100%;
      height: 100%;
      background: #040406;
      color: #eeeeef;
      font-family: 'Space Grotesk', sans-serif;
      overflow: hidden; /* Eliminates block scrolling between sections */
      -webkit-tap-highlight-color: transparent;
      cursor: default;
    }

    /* -------------------------------------------------------------
       2. IMMERSIVE MATERIALITY: GRAIN, SPOTLIGHT, CURSOR
    ------------------------------------------------------------- */
    .film-grain {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity: 0.035;
      mix-blend-mode: overlay;
      pointer-events: none;
      z-index: 9990;
    }

    .ambient-spotlight {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      background: radial-gradient(
        850px circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh),
        rgba(197, 160, 89, 0.04),
        rgba(255, 255, 255, 0.01) 40%,
        transparent 75%
      );
      transition: background 0.15s ease-out;
    }

    .custom-cursor-dot {
      position: fixed;
      top: 0;
      left: 0;
      width: 5px;
      height: 5px;
      background: #c5a059;
      border-radius: 50%;
      pointer-events: none;
      z-index: 99999;
      transform: translate(-50%, -50%);
      transition: opacity 0.2s;
    }

    .custom-cursor-ring {
      position: fixed;
      top: 0;
      left: 0;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 50%;
      pointer-events: none;
      z-index: 99998;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.52rem;
      font-family: 'Space Mono', monospace;
      letter-spacing: 1.5px;
      color: #fff;
      white-space: nowrap;
      transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.3s, background 0.3s;
    }

    .custom-cursor-ring.is-inspect {
      width: 88px;
      height: 88px;
      background: rgba(6, 6, 8, 0.78);
      backdrop-filter: blur(8px);
      border-color: #c5a059;
      color: #c5a059;
    }

    @media (pointer: coarse) {
      .custom-cursor-dot, .custom-cursor-ring { display: none !important; }
    }

    /* -------------------------------------------------------------
       3. UNDER-LAYER MENU (REVEALED ON 3D SHIFT)
    ------------------------------------------------------------- */
    .under-canvas-menu {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1;
      background: radial-gradient(circle at 85% 50%, rgba(197, 160, 89, 0.08), transparent 60%), #050507;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: clamp(30px, 6vw, 100px);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s ease 0.1s;
    }

    body.menu-open .under-canvas-menu {
      pointer-events: auto;
      opacity: 1;
    }

    .under-menu-content {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .under-menu-badge {
      font-family: 'Space Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 4px;
      color: #c5a059;
      text-transform: uppercase;
    }

    .under-menu-nav {
      display: flex;
      flex-direction: column;
      gap: 14px;
      list-style: none;
    }

    .under-menu-nav a {
      font-family: 'Anton', sans-serif;
      font-size: clamp(2.4rem, 4.8vw, 4.2rem);
      line-height: 1;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #70707a;
      text-decoration: none;
      transition: color 0.25s, transform 0.25s;
      display: inline-block;
    }

    .under-menu-nav a:hover,
    .under-menu-nav a.active {
      color: #ffffff;
      transform: translateX(-10px);
      text-shadow: 0 0 25px rgba(197, 160, 89, 0.35);
    }

    .under-menu-meta {
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 2.5px;
      color: #888894;
      text-transform: uppercase;
    }

    /* -------------------------------------------------------------
       4. MAIN WEBSITE FRAME (3D SHIFT)
    ------------------------------------------------------------- */
    .main-site-frame {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: #000000;
      z-index: 10;
      transform-origin: center right;
      transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                  border-radius 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.menu-open .main-site-frame {
      transform: translateX(-50%) rotate(12deg);
      box-shadow: -40px 50px 120px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      cursor: pointer;
      overflow: hidden;
      pointer-events: none;
    }

    /* -------------------------------------------------------------
       5. TOP HEADER & HAMBURGER
    ------------------------------------------------------------- */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 24px clamp(24px, 5vw, 64px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 950;
      background: linear-gradient(to bottom, rgba(4, 4, 6, 0.92), transparent);
      pointer-events: none;
    }

    .brand-group {
      display: flex;
      align-items: center;
      gap: 14px;
      pointer-events: auto;
    }

    .brand-logo-icon {
      width: 22px;
      height: 22px;
      stroke: #ffffff;
      fill: none;
      stroke-width: 1.5;
    }

    .brand-title {
      font-family: 'Anton', sans-serif;
      font-size: 1.15rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #ffffff;
      line-height: 1;
    }

    .brand-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.8rem;
      letter-spacing: 1.5px;
      color: #888894;
    }

    .menu-toggle-btn {
      pointer-events: auto;
      background: rgba(6, 6, 8, 0.65);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      transition: border-color 0.25s, background 0.25s;
    }

    .menu-toggle-btn:hover {
      border-color: #ffffff;
      background: rgba(255, 255, 255, 0.14);
    }

    .menu-toggle-btn span {
      display: block;
      width: 18px;
      height: 1.5px;
      background: #ffffff;
      transition: transform 0.35s ease;
      transform-origin: center;
    }

    body.menu-open .menu-toggle-btn span:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
    }
    body.menu-open .menu-toggle-btn span:nth-child(2) {
      transform: translateY(-0px) rotate(-45deg);
    }

    /* -------------------------------------------------------------
       6. MASTER VIEWPORT & PRESENTATION LAYERS
    ------------------------------------------------------------- */
    .stage-viewport-master {
      position: absolute;
      inset: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: #000000;
    }

    .section-view-layer {
      position: absolute;
      inset: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .section-view-layer.active-view {
      opacity: 1;
      pointer-events: auto;
    }

    /* -------------------------------------------------------------
       7. SECTION 0: HERO BANNER
    ------------------------------------------------------------- */
    .banner-bg-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 140vh;
      will-change: transform;
      pointer-events: none;
      z-index: 1;
      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .banner-bg-layer img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      filter: brightness(0.48) contrast(110%);
    }

    .section-darken-veil {
      position: absolute;
      inset: 0;
      width: 100vw;
      height: 100vh;
      background: #000000;
      opacity: 0;
      pointer-events: none;
      z-index: 60;
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .banner-fade-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 45vh;
      background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.85) 65%, #000000 100%);
      pointer-events: none;
      z-index: 2;
    }

    .banner-center-emblem {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-top: auto;
      margin-bottom: auto;
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .emblem-svg {
      width: clamp(70px, 8vw, 90px);
      height: clamp(70px, 8vw, 90px);
      stroke: #ffffff;
      fill: none;
      stroke-width: 1.2;
    }

    .emblem-tag {
      font-family: 'Space Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: #cfcfe0;
    }

    .banner-bottom-content {
      position: absolute;
      bottom: clamp(35px, 5vh, 55px);
      z-index: 10;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .banner-main-title {
      font-family: 'Anton', sans-serif;
      font-size: clamp(3rem, 6.5vw, 6rem);
      letter-spacing: clamp(6px, 1.2vw, 14px);
      text-transform: uppercase;
      color: #ffffff;
      font-weight: normal;
      line-height: 1;
    }

    .banner-serif-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1rem, 1.5vw, 1.3rem);
      letter-spacing: 2px;
      color: #9a9aa5;
    }

    .banner-scroll-cue {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: #72727d;
      text-decoration: none;
      transition: color 0.25s;
      cursor: pointer;
    }

    .banner-scroll-cue:hover {
      color: #ffffff;
    }

    /* -------------------------------------------------------------
       8. SECTIONS 1 & 2: LEINWAND & WOODWORKS ROOM LAYERS
    ------------------------------------------------------------- */
    .room-bg-layer {
      position: absolute;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1;
      pointer-events: none;
    }

    .room-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: grayscale(100%) brightness(0.68) contrast(112%);
      display: block;
      transition: filter 0.8s ease, opacity 0.8s ease;
    }

    .ww-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: grayscale(100%) brightness(0.65) contrast(110%);
      display: block;
      transition: filter 0.8s ease, opacity 0.8s ease;
    }

    @media (max-width: 860px) {
      .room-bg-img { object-position: 66% center; }
    }

    .room-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 65% 50%, rgba(0,0,0,0.01), rgba(0,0,0,0.92) 85%);
      pointer-events: none;
    }

.static-bench-painting {
  position: fixed;
  object-fit: cover;
  transform: perspective(1000px) rotateY(353deg) rotateZ(3deg);
  transform-origin: 50% 50%; /* <-- CHANGE THIS FROM 'center bottom' */
  filter: brightness(0.74) contrast(108%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  pointer-events: auto;
  z-index: 50;
  opacity: 0;
  will-change: top, left, width, height, transform, opacity, filter, border, border-radius;
}

    /* Headline with Subtle Upward Motion on Entry */
    .headline-block {
      position: absolute;
      z-index: 90000;
      left: clamp(24px, 5vw, 64px);
      display: flex;
      flex-direction: column;
      pointer-events: none;
      opacity: 1;
      transform: translate3d(0, 35px, 0);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                  top 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .headline-block.text-entered {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .leinwand-ghost-watermark,
    .woodworks-ghost-watermark {
      position: absolute;
      top: -30px;
      left: -14px;
      font-family: 'Anton', sans-serif;
      font-size: clamp(4.2rem, 9.5vw, 10.5rem);
      line-height: 0.85;
      letter-spacing: clamp(6px, 1.2vw, 16px);
      text-transform: uppercase;
      color: transparent;
      -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.045);
      white-space: nowrap;
      user-select: none;
      pointer-events: none;
      z-index: -1;
      will-change: transform;
    }

    .headline-badge {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 6px;
    }

    .badge-idx {
      font-family: 'Space Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 3.5px;
      color: #c5a059;
      text-transform: uppercase;
      font-weight: 700;
    }

    .badge-line {
      width: 28px;
      height: 1px;
      background: rgba(197, 160, 89, 0.7);
    }

    .badge-serif {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.05rem;
      letter-spacing: 1.5px;
      color: #a4a4b0;
    }

    .headline-title {
      font-family: 'Anton', sans-serif;
      font-size: clamp(3.6rem, 8vw, 8rem);
      line-height: 0.88;
      letter-spacing: clamp(3px, 1vw, 8px);
      text-transform: uppercase;
      font-weight: normal;
      color: #ffffff;
      text-shadow: 0 10px 40px rgba(0, 0, 0, 0.95);
    }

    .headline-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #7a7a88;
    }

    .meta-dot { color: #c5a059; }

    /* -------------------------------------------------------------
       9. ROTATED ENDLESS SLIDERS (-8deg)
    ------------------------------------------------------------- */
.slider-shelf-wrapper {
  position: absolute;
  bottom: clamp(10px, 2vh, 25px);
  left: 0;
  width: 100%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

    .slider-viewport {
      position: relative;
      width: 138vw;
      margin-left: -19vw;
      overflow: hidden;
      padding: 35px 0;
      transform: rotate(-8deg);
      transform-origin: 50% 50%;
      touch-action: pan-y;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
    }

    .slider-track {
      display: flex;
      gap: clamp(16px, 2vw, 28px);
      width: max-content;
      padding-left: clamp(24px, 5vw, 64px);
      will-change: transform;
      user-select: none;
      cursor: grab;
    }

    .slider-track:active {
      cursor: grabbing;
    }

    .art-card {
      position: relative;
      flex: 0 0 clamp(220px, 18vw, 320px);
      aspect-ratio: 4 / 5.2;
      background: #090909;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 2px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    }

    .art-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .art-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: grayscale(18%) contrast(106%);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
      pointer-events: none;
    }

    @media (hover: hover) {
      .art-card:hover {
        transform: translateY(-8px);
        border-color: rgba(255, 255, 255, 0.5);
      }
      .art-card:hover img {
        transform: scale(1.05);
        filter: grayscale(0%) contrast(100%);
      }
    }

    .card-status-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem;
      letter-spacing: 2px;
      font-weight: 700;
      text-transform: uppercase;
      color: #e0e0ea;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(8px);
      padding: 3px 8px;
      border-radius: 2px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      z-index: 2;
      pointer-events: none;
    }

    .card-label-block {
      position: absolute;
      bottom: 12px;
      left: 12px;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(6px);
      padding: 6px 10px;
      border-radius: 2px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      z-index: 2;
      pointer-events: none;
    }

    .card-label-title {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.9rem;
      color: #ffffff;
    }

    .card-label-idx {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #888894;
    }

    .slider-action-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-left: clamp(24px, 5vw, 64px);
    }

    .nav-arrow-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background 0.25s, border-color 0.25s;
    }

    .nav-arrow-btn:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: #ffffff;
    }

    .slider-drag-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #72727d;
    }

    .scroll-cue-pill {
      position: absolute;
      bottom: 24px;
      right: clamp(24px, 5vw, 64px);
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: rgba(0, 0, 0, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #a0a0ab;
      cursor: pointer;
      transition: background 0.25s, color 0.25s, opacity 0.3s;
    }

    .scroll-cue-pill:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
    }

    /* -------------------------------------------------------------
       10. SECTION 3: STREET ART VIEW
    ------------------------------------------------------------- */
    #viewStreetArt {
      background: #050508;
      background-image: url('D:/Projekte/INGE/AIRBRUSH/DSC_0316.jpg');
      background-size: cover;
      background-position: center;
    }

    .sa-ambient-bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 20% 40%, rgba(197, 160, 89, 0.08), transparent 50%),
                  radial-gradient(circle at 80% 60%, rgba(0, 0, 0, 0.75), #050508 85%);
      pointer-events: none;
      z-index: 1;
    }

    .sa-container {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 clamp(24px, 5vw, 64px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: clamp(40px, 6vw, 90px);
    }

    .sa-narrative-col {
      flex: 1;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
    }

    .sa-ghost-watermark {
      position: absolute;
      top: -24px;
      left: -12px;
      font-family: 'Anton', sans-serif;
      font-size: clamp(4.5rem, 11vw, 11rem);
      line-height: 0.85;
      letter-spacing: clamp(6px, 1.2vw, 18px);
      text-transform: uppercase;
      color: transparent;
      -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.045);
      white-space: nowrap;
      user-select: none;
      pointer-events: none;
      z-index: -1;
      will-change: transform;
    }

    .sa-eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .sa-mono-tag {
      font-family: 'Space Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 4px;
      color: #c5a059;
      text-transform: uppercase;
      font-weight: 700;
    }

    .sa-tag-rule {
      width: 32px;
      height: 1px;
      background: rgba(197, 160, 89, 0.6);
    }

    .sa-main-title {
      font-family: 'Anton', sans-serif;
      font-size: clamp(3.8rem, 7.5vw, 7.5rem);
      line-height: 0.9;
      letter-spacing: clamp(4px, 1.2vw, 10px);
      text-transform: uppercase;
      color: #ffffff;
      text-shadow: 0 10px 45px rgba(0, 0, 0, 0.9);
    }

    .sa-lead-serif {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.1rem, 1.6vw, 1.4rem);
      color: #a0a0ab;
      line-height: 1.4;
      margin-top: 4px;
    }

    .sa-body-text {
      font-size: 0.9rem;
      line-height: 1.7;
      color: #888894;
      margin-top: 8px;
    }

    .sa-coordinates-box {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 14px;
      padding: 12px 18px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 2px;
      width: fit-content;
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 2px;
      color: #c5a059;
      text-transform: uppercase;
    }

    .sa-preview-col {
      flex: 0 0 clamp(260px, 32vw, 420px);
      position: relative;
    }

    .sa-card-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 5.4;
      background: #0a0a0e;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.98), 0 0 40px rgba(197, 160, 89, 0.08);
      cursor: pointer;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
      will-change: transform;
    }

    .sa-card-frame:hover {
      transform: translateY(-8px) scale(1.02);
      border-color: rgba(197, 160, 89, 0.6);
    }

    .sa-card-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(35%) contrast(110%);
      transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sa-card-frame:hover img {
      filter: grayscale(0%) contrast(105%);
      transform: scale(1.05);
    }

    .sa-coming-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      background: #c5a059;
      color: #040406;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 2px;
      z-index: 5;
    }

    .sa-edition-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(4, 4, 6, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #e0e0ea;
      font-family: 'Space Mono', monospace;
      font-size: 0.54rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 2px;
      z-index: 5;
    }

    .sa-card-info-pane {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 20px 16px 14px 16px;
      background: linear-gradient(to top, rgba(4, 4, 6, 0.95) 60%, transparent);
      z-index: 5;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .sa-card-title {
      font-family: 'Anton', sans-serif;
      font-size: 1.3rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #ffffff;
    }

    .sa-card-medium {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.88rem;
      color: #c5a059;
    }

    @media (max-width: 860px) {
      .sa-container {
        flex-direction: column;
        align-items: flex-start;
      }
      .sa-preview-col {
        width: 100%;
        max-width: 340px;
      }
    }

    /* -------------------------------------------------------------
       11. SHARED-ELEMENT MORPH TRANSITION
    ------------------------------------------------------------- */
    .morph-active-image {
      position: fixed;
      z-index: 2500;
      pointer-events: none;
      will-change: transform, top, left, width, height, border-radius;
      transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                  top 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                  left 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                  width 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                  height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                  border-radius 0.65s ease,
                  box-shadow 0.65s ease;
    }



    /* -------------------------------------------------------------
       12. DETAIL MODAL VIEW (100% UNCROPPED)
    ------------------------------------------------------------- */
    .detail-viewer-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(0, 0, 0, 0);
      backdrop-filter: blur(0px);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: background 0.45s ease, opacity 0.4s ease, backdrop-filter 0.45s ease;
    }

    .detail-viewer-overlay.active {
      background: rgba(0, 0, 0, 0.96);
      backdrop-filter: blur(30px);
      opacity: 1;
      pointer-events: auto;
    }

    .viewer-layout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(35px, 5vw, 80px);
      width: 92%;
      max-width: 1300px;
      max-height: 90vh;
    }

    .viewer-media-slot {
      flex: 0 0 auto;
      position: relative;
      visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .viewer-media-slot img {
      max-width: 100%;
      max-height: 84vh;
      width: auto;
      height: auto;
      object-fit: contain;
      box-shadow: 0 25px 75px rgba(0, 0, 0, 0.98);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 2px;
      display: block;
    }

    .viewer-content-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .viewer-lot-badge {
      font-family: 'Space Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 3.5px;
      color: #c5a059;
      text-transform: uppercase;
      margin-bottom: 12px;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    }

    .viewer-title {
      font-family: 'Anton', sans-serif;
      font-size: clamp(2.4rem, 4.4vw, 4.8rem);
      line-height: 0.92;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #ffffff;
      margin-bottom: 8px;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.16s;
    }

    .viewer-subtitle {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.15rem;
      letter-spacing: 1px;
      color: #888894;
      margin-bottom: 24px;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
    }

    .viewer-provenance-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 16px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      margin-bottom: 24px;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.24s;
    }

    .prov-col span {
      display: block;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem;
      color: #666672;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .prov-col strong {
      font-size: 0.85rem;
      color: #f2f2f5;
      font-weight: 500;
    }

    .viewer-desc {
      font-size: clamp(0.85rem, 1vw, 0.95rem);
      line-height: 1.7;
      color: #bababf;
      max-width: 500px;
      margin-bottom: 30px;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
    }

    .viewer-action-bar {
      display: flex;
      gap: 14px;
      align-items: center;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.32s;
    }

    .inquire-btn {
      background: #ffffff;
      border: 1px solid #ffffff;
      color: #000000;
      padding: 12px 26px;
      font-family: 'Space Mono', monospace;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      transition: background 0.25s, color 0.25s;
    }

    .inquire-btn:hover {
      background: transparent;
      color: #ffffff;
    }

    .viewer-close-btn {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #fff;
      padding: 12px 24px;
      font-family: 'Space Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      transition: background 0.25s, border-color 0.25s;
    }

    .viewer-close-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: #fff;
    }

    .detail-viewer-overlay.active .viewer-lot-badge,
    .detail-viewer-overlay.active .viewer-title,
    .detail-viewer-overlay.active .viewer-subtitle,
    .detail-viewer-overlay.active .viewer-provenance-grid,
    .detail-viewer-overlay.active .viewer-desc,
    .detail-viewer-overlay.active .viewer-action-bar {
      transform: translateY(0);
      opacity: 1;
    }

    @media (max-width: 860px) {
      .viewer-layout {
        flex-direction: column;
        max-height: 85vh;
        overflow-y: auto;
      }
      .viewer-media-slot {
        max-width: 85vw;
        max-height: 48vh;
      }
    }