/* A continuous floor and fog, with the product standing upright. */
.hero{background:#150d09 url('assets/studio-background-v3.webp') center center/100% 100% no-repeat}
.halo,.scene-floor,.grain,.backword,.orbit,.round-note{display:none}
.vignette{background:linear-gradient(90deg,#08040345,transparent 52%,#08040316);z-index:1}
.fog-back{opacity:.12;top:32%;height:41%;right:-12%;width:90%}
.fog-front{opacity:.16;bottom:12%;height:23%;z-index:2}
.visual{bottom:0;height:100%;align-items:flex-end}
.product-wrap{position:absolute;bottom:2%;height:89%;margin:0;animation:none;z-index:3;filter:drop-shadow(10px 10px 8px #08040160)}
.product-wrap img,#product{transform:none;object-fit:contain}
.floor-shadow{position:absolute;bottom:0;left:20%;width:65%;height:6%;background:radial-gradient(ellipse,#050201c9 0,#08040270 32%,transparent 70%);filter:blur(6px);z-index:1}
.product-label{bottom:-5%;left:28%;opacity:.7}
.departing-product{position:absolute!important;animation:none!important}
.beans{z-index:2}.bean{opacity:.85}
header{border-bottom-color:#eedac510}footer{border-top-color:#eedac518}
@media(max-width:900px) and (min-width:601px){.product-wrap{height:81%}}

/* Independent depth planes; the floor stays continuous with the photograph. */
.hero{--depth-x:0;--depth-y:0;background:#150d09}
.scene-backdrop{position:absolute;inset:-2.5%;z-index:-1;background:#150d09 url('assets/studio-background-v3.webp') center/100% 100% no-repeat;translate:calc(var(--depth-x)*-10px) calc(var(--depth-y)*-6px);will-change:translate}
.fog-back{opacity:.24;translate:calc(var(--depth-x)*-30px) calc(var(--depth-y)*-14px);will-change:translate}
.fog-front{opacity:.26;translate:calc(var(--depth-x)*-54px) calc(var(--depth-y)*-22px);will-change:translate}
.beans{translate:calc(var(--depth-x)*-22px) calc(var(--depth-y)*-12px);will-change:translate}
.visual{translate:calc(var(--depth-x)*-7px) calc(var(--depth-y)*-3px)}
.product-wrap{will-change:transform,filter,opacity}

@media(prefers-reduced-motion:reduce){.scene-backdrop,.fog,.beans,.visual{translate:none!important;will-change:auto}.product-wrap{will-change:auto}}
/* Keep the accents with the product, away from the copy. */
.scene-backdrop{inset:-5%;transform:scale(1.04);will-change:transform,filter,translate}
.visual>.beans{inset:0;z-index:4;pointer-events:none;translate:calc(var(--depth-x)*-13px) calc(var(--depth-y)*-7px)}
.visual .bean{left:var(--x);top:var(--y);width:var(--size);height:var(--size);opacity:.88}
.product-wrap{will-change:transform,opacity}

/* Let fog drift continue under the morph instead of restarting its transform. */
.hero{--fog-sweep:0}
.fog-back{translate:calc(var(--depth-x)*-30px + var(--fog-sweep)*-24px) calc(var(--depth-y)*-14px);opacity:calc(.2 + var(--fog-sweep)*.04)}
.fog-front{translate:calc(var(--depth-x)*-54px + var(--fog-sweep)*32px) calc(var(--depth-y)*-22px);opacity:calc(.2 + var(--fog-sweep)*.05);z-index:1}
.vignette{z-index:2;background:radial-gradient(ellipse 34% 60% at 72% 49%,transparent 4%,#08040218 35%,#08040288 75%,#050201de 120%),linear-gradient(90deg,#08040350,transparent 58%)}
/* Rounded, quieter controls with a clear selected state. */
.collection{border:1px solid #e8ccb22b;border-radius:999px;background:#e6c8a408;padding:12px 18px;backdrop-filter:blur(12px);transition:background .25s,border-color .25s}
.collection:hover{background:#e6c8a415;border-color:#e8ccb260}
.collection span{margin-left:18px}
.cta{border:0;border-radius:999px;background:#edd0a0;padding:9px 9px 9px 24px;display:inline-flex;align-items:center;gap:24px;min-height:52px;font-size:12px;box-shadow:0 6px 25px #08040224;transition:background .25s,box-shadow .25s}
.cta span{margin:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#4a301d12;font-size:20px}
.cta:hover{background:#f6dfba;box-shadow:0 8px 30px #08040240}
.description{font-size:14px;color:#d6c7b8;line-height:1.8}
.eyebrow{letter-spacing:2px}
footer{gap:22px;border-top:0}
nav{gap:5px;align-items:center}
nav button{border:1px solid transparent;border-radius:15px;padding:12px 14px;line-height:1.6;transition:background .25s,border-color .25s,color .25s;color:#bca58d}
nav button span{font-size:7px;letter-spacing:1.3px;margin-bottom:3px}
nav button.active{background:#ddbc8b10;border-color:#ddbc8b3b;color:#f3d7af;backdrop-filter:blur(12px)}
nav button.active:before{display:none}
nav button:hover{color:#f3d7af;background:#ddbc8b0c}
.arrows{gap:7px;display:flex}.arrows button,.pause{width:42px;height:42px;border-radius:50%;border:1px solid #ddbc8b38;background:#ddbc8b08;backdrop-filter:blur(12px);transition:background .25s}
.arrows button:hover,.pause:hover{background:#ddbc8b22}
.pause{display:grid;place-items:center;padding:0;flex-shrink:0}
dialog{border-radius:26px;background:#291b14ed;backdrop-filter:blur(24px)}#catalog button{border-radius:18px;transition:background .25s}
.close{width:38px;height:38px;border-radius:50%;background:#ead4b510}
@media(max-width:1100px) and (min-width:601px){.footer-label{display:none}nav button{padding:10px}}

/* Outline call to action, matching the reference's lighter treatment. */
.cta{background:transparent;border:1px solid #f0dcc070;color:#f3e4ce;box-shadow:none;min-height:52px;padding:15px 27px;gap:0;backdrop-filter:blur(4px);font-size:11px;letter-spacing:.25px;transition:background .25s,border-color .25s}
.cta span{display:none}
.cta:hover{background:#f1d7b510;border-color:#f0dcc0c0;box-shadow:none}

.profile{display:flex;align-items:center;gap:8px;margin:0 0 24px;color:#d9c6aa;font-size:10px;letter-spacing:.35px}
.profile span{border:1px solid #dec3a129;border-radius:999px;padding:6px 11px;background:#dbc29e05}
.intro{font-family:'DM Sans',sans-serif;font-style:normal;font-size:12px;letter-spacing:1px;color:#d8b788;margin:24px 0 16px}
.description{max-width:420px;font-size:13px;margin-bottom:16px;line-height:1.85}
h1{font-size:clamp(48px,5vw,80px);letter-spacing:-2.5px}
#catalog button{font-weight:500;padding:20px 13px;text-align:center}
#catalog button small{display:block;margin-top:10px;font-size:10px;line-height:1.7;color:#cdb89e;font-weight:400}
.catalog-source{font-size:10px;line-height:1.7;color:#bca58d;margin-top:24px}.catalog-source a{color:#dec5a2;text-underline-offset:3px}

@media(max-width:600px){
  /* Viewport fitting for hero with topbar and proposal */
  html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .hero {
    height: calc(100svh - 44px);
    min-height: 540px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #150d09 url('assets/studio-background-v3.webp') 65% center/auto 100% no-repeat;
  }
  .scene-backdrop {
    background-size: auto 100%;
    background-position: 65% center;
  }
  .fog-front { opacity: .22; }

  /* Compact Header */
  header {
    height: 58px;
    min-height: 58px;
    margin: 0 6%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .collection {
    padding: 8px 12px;
    font-size: 10px;
  }
  .collection span { margin-left: 6px; }

  /* Single-row Footer exactly as before */
  footer {
    height: 72px;
    min-height: 72px;
    margin: 0 6%;
    flex-shrink: 0;
    gap: 8px;
    display: flex;
    align-items: center;
    border-top: none;
  }
  .footer-label { display: none; }
  nav {
    display: flex;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
  }
  nav button {
    min-width: 72px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 9.5px;
  }
  nav button span { font-size: 6px; }
  .arrows { gap: 5px; display: flex; }
  .arrows button, .pause {
    width: 32px;
    height: 32px;
  }
  .pause { font-size: 10px; }

  /* Stage: Title stays at top, with comfortable breathing room from header */
  .stage {
    flex: 1;
    height: auto;
    min-height: 0;
    margin: 0 6%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: clamp(18px, 3.5vh, 28px);
    overflow: visible;
  }

  /* Copy: Eyebrow, Intro, H1 span full width at top */
  .copy {
    width: 100%;
    padding: 0;
    z-index: 5;
    position: relative;
  }
  .eyebrow {
    font-size: 7.5px;
    letter-spacing: 1.5px;
    margin: 0 0 4px;
    width: 100%;
  }
  .intro {
    font-size: 11px;
    margin: 0 0 6px;
    letter-spacing: .3px;
    width: 100%;
  }
  h1 {
    font-size: clamp(26px, 7.8vw, 34px);
    line-height: 1.08;
    letter-spacing: -1.3px;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Description, Tags, Button lowered down beside the coffee */
  .description {
    width: 50%;
    max-width: 195px;
    font-size: 10.5px;
    line-height: 1.55;
    margin: clamp(20px, 4.5vh, 40px) 0 10px;
  }
  .profile {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 14px;
    max-width: 50%;
    font-size: 8.5px;
  }
  .profile span {
    padding: 4px 8px;
    border-radius: 999px;
  }
  .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 15px;
    font-size: 9.5px;
    max-width: 50%;
    white-space: nowrap;
    text-align: center;
  }

  /* Coffee Visual on right */
  .visual {
    position: absolute;
    right: -4%;
    top: 16%;
    bottom: 2%;
    width: 52%;
    height: 80%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    z-index: 4;
  }
  .product-wrap {
    position: absolute;
    bottom: 2%;
    height: 94%;
    max-height: 350px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
    animation: none;
    filter: drop-shadow(8px 12px 10px #08040180);
  }
  .product-wrap img, #product {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transform: none;
  }
  .floor-shadow {
    position: absolute;
    bottom: 1%;
    left: 8%;
    width: 84%;
    height: 6%;
    filter: blur(5px);
  }
  .product-label {
    position: absolute;
    bottom: -5%;
    left: 0;
    right: 0;
    justify-content: center;
    font-size: 6px;
    gap: 8px;
    opacity: .7;
  }
  .visual .bean {
    left: var(--x);
    top: var(--y);
    width: calc(var(--size) * .65);
    height: calc(var(--size) * .65);
  }
  .vignette {
    background: radial-gradient(ellipse 46% 40% at 76% 66%, transparent 8%, #08040228 40%, #080402a8 100%), linear-gradient(180deg, #08040235, transparent 65%);
  }
}