:root{
      --bg: #fafafa;
      --text: #121212;
      --muted: rgba(18,18,18,0.62);
      --muted2: rgba(18,18,18,0.42);
      --card: rgba(255,255,255,0.86);
      --stroke: rgba(18,18,18,0.12);
      --shadow: 0 20px 60px rgba(0,0,0,0.10);
      --shadow2: 0 8px 22px rgba(0,0,0,0.08);

      --door-size: 251px;
      --door-pad: 28px;
      --floor-baseline: 116px;
      --door-image-offset: 53px;
      --scene-offset-y: 40px;
      --content-offset-y: -80px;
      --zoom-scale: 9.5;
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; overflow:hidden; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg);
      color: var(--text);
      outline: 6px solid red;
    }

    .viewport{
      position: fixed;
      inset: 0;
      overflow: hidden;
      background: var(--bg);
    }

    /* Fixed design size (1440x900) */
    .canvas{
      position: absolute;
      left: 50%;
      top: auto;
      bottom: 0;
      width: 1440px;
      height: 900px;
      transform: translateX(-50%);
      transform-origin: center bottom;
      overflow: hidden;
      background-color: var(--bg);
      background-image: url("../images/BG-wall.png");
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
    }

    /* Subtle “white gallery” feel */
    .gallery-surface{
      position:absolute;
      inset:0;
      background:
        radial-gradient(1000px 700px at 50% 20%, rgba(0,0,0,0.025), transparent 60%),
        radial-gradient(900px 650px at 50% 100%, rgba(0,0,0,0.02), transparent 60%);
      pointer-events:none;
    }
    .horizon{
      position:absolute;
      left:0; right:0;
      bottom:0;
      height:252px;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,0.012));
      pointer-events:none;
    }

    /* Stage holds scenes and performs zoom */
    .stage{
      position: relative;
      width: 100%;
      height: calc(100% - var(--scene-offset-y));
      margin-top: var(--scene-offset-y);
      z-index: 0;
      transform-origin: 50% 50%;
      transition: transform 750ms cubic-bezier(.2,.8,.2,1), filter 750ms cubic-bezier(.2,.8,.2,1);
      will-change: transform, filter;
    }

    /* Scenes */
    .scene{
      position:absolute;
      inset:0;
      z-index: 1;
      opacity:0;
      pointer-events:none;
      transition: opacity 380ms ease;
    }
    .scene.active{
      opacity:1;
      pointer-events:auto;
    }

    /* Screen 1 layout */
    .brand-stack{
      position:absolute;
      left:50%;
      top:280px;
      transform: translate(-50%,-50%) translateY(var(--content-offset-y));
      text-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:18px;
      padding: 0 20px;
    }

    .brand-logo{
      width:min(420px, 78vw);
      height:auto;
      display:block;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,0.10));
    }

    .app-icon{
      width: 92px;
      height: 92px;
      border-radius: 22px;
      display:block;
      box-shadow: var(--shadow2);
      border: 1px solid rgba(0,0,0,0.06);
      background: #fff;
      object-fit: cover;
    }

    .footer-left{
      position:absolute;
      left: var(--door-pad);
      bottom: calc(var(--floor-baseline) + 8px);
      text-transform: uppercase;
      color: rgba(18,18,18,0.5);
      font-size: 12px;
      letter-spacing: 0.06em;
      user-select:none;
    }

    /* Screen 2 */
    .room2-wrap{
      position:absolute;
      inset:0;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding: 36px 20px;
      padding-top: 90px;
      transform: translateY(var(--content-offset-y));
    }

    .card{
      width: 828px;
      background: var(--card);
      backdrop-filter: blur(10px);
      border: 1px solid var(--stroke);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 39px 32px;
      position:relative;
      text-align: center;
    }
    #scene2 .card{
      border: 2px solid #b08a2e;
    }

    .card h1{
      margin:0 0 12px;
      font-size: clamp(31px, 3.8vw, 46px);
      letter-spacing: -0.02em;
      font-weight: 700;
    }
    .card p{
      margin: 0 0 14px;
      font-size: 19px;
      line-height: 1.55;
      color: rgba(18,18,18,0.78);
    }

    .signature{
      margin-top: 18px;
      font-size: 17px;
      color: var(--muted);
      line-height: 1.45;
    }
    .signature strong{
      color: rgba(18,18,18,0.88);
      font-size: 19px;
      letter-spacing: 0.04em;
      font-weight: 700;
    }
    .tagline{
      color: rgba(18,18,18,0.68);
      font-style: italic;
    }

    .notify{
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(18,18,18,0.10);
    }

    .notify-label{
      font-size: 17px;
      color: rgba(18,18,18,0.86);
      margin: 0 0 8px;
    }
    .notify-sub{
      font-size: 16px;
      color: rgba(18,18,18,0.58);
      margin: 0 0 14px;
    }

    form{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    input[type="email"]{
      flex: 0 1 360px;
      width: 360px;
      min-width: 220px;
      height: 44px;
      padding: 0 14px;
      border-radius: 12px;
      border: 1px solid rgba(18,18,18,0.14);
      background: rgba(255,255,255,0.92);
      outline: none;
      font-size: 17px;
    }
    input[type="email"]:focus{
      border-color: rgba(18,18,18,0.28);
      box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
    }

    button{
      height: 44px;
      padding: 0 16px;
      border-radius: 12px;
      border: 1px solid rgba(18,18,18,0.18);
      background: rgba(18,18,18,0.92);
      color: #fff;
      font-size: 17px;
      letter-spacing: 0.01em;
      cursor:pointer;
      transition: transform 120ms ease, opacity 120ms ease;
    }
    button:hover{ transform: translateY(-1px); }
    button:active{ transform: translateY(0px); opacity:0.92; }

    .age-confirm {
      margin-top: 14px;
      text-align: center;
      font-size: 0.85rem;
      color: #555;
    }

    .age-line {
      display: block;
      margin-bottom: 6px;
    }

    .age-confirm input {
      margin-right: 6px;
      accent-color: #b08a2e;
    }

    .legal-links {
      font-size: 0.8rem;
    }

    .legal-links a {
      text-decoration: underline;
      color: inherit;
    }

    .legal-links a:hover {
      opacity: 0.7;
    }

    .fineprint{
      margin-top: 10px;
      font-size: 14px;
      color: rgba(18,18,18,0.48);
    }

    .legal-footer {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 9999;
      pointer-events: auto;
      text-align: center;
      font-size: 0.8rem;
      color: #777;
    }

    .legal-footer a {
      color: rgba(18,18,18,0.65);
      text-decoration: none;
      transition: opacity 120ms ease;
    }

    .legal-footer a:hover {
      opacity: 0.8;
    }

    .legal-footer a + a {
      margin-left: 18px;
    }

    .vertical-nappa{
      position:absolute;
      left: 153px;
      top: 42%;
      bottom: auto;
      transform: translate(-50%, -50%) translateY(var(--content-offset-y)) rotate(180deg);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-size: 66px;
      font-weight: 500;
      color: rgba(18,18,18,0.22);
      filter: blur(0.6px);
      user-select:none;
      pointer-events:none;
    }

    /* Doors */
    .door{
      position:absolute;
      width: var(--door-size);
      height: var(--door-size);
      bottom: var(--floor-baseline);
      display:flex;
      align-items:flex-end;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }
    .door.left{ left: var(--door-pad); }
    .door.right{ right: var(--door-pad); }

    .door .hint{
      position:absolute;
      bottom: -18px;
      font-size: 11px;
      color: rgba(18,18,18,0.45);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .door svg,
    .door .door-image{
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.18));
    }
    .door .door-image{
      position: absolute;
      left: 0;
      right: 0;
      bottom: var(--door-image-offset);
      object-fit: contain;
      display: block;
    }
    .door-closed{
      filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
      mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
    .door-leaf{
      transform-origin: 18% 84%;
      transform: rotateY(0deg);
      transition: transform 520ms cubic-bezier(.2,.9,.2,1);
      will-change: transform;
    }
    .door.open .door-leaf{
      transform: rotateY(-70deg);
    }

    @media (prefers-reduced-motion: reduce){
      .stage, .scene, .door-leaf { transition: none !important; }
    }

    @media (max-width: 520px){
      :root{ --door-size: 178px; --door-pad: 18px; --floor-baseline: 18px; --door-image-offset: 35px; --zoom-scale: 9.0; }
      .card{ padding: 26px 18px; }
      .vertical-nappa{ left: 10px; }
    }