/* ===================================================================
     調整用パラメータ
     =================================================================== */
  :host{
    --brightness: .32;   /* 背面映像の明るさ（1.0で素の明るさ） */
    --veil: .26;         /* 全体にかぶせるヴェールの濃さ */
    --lens: .92;         /* レンズ縁の落ち込みの強さ */
    --gold: #f0dfba;

    /* スポットライトの外側の色。黒ではなく赤褐色で沈めます */
    --dark: #260c05;       /* スポット外の地色 */
    --dark-edge: 20,5,2;   /* 周縁・レンズ縁に使う暗い赤褐色(RGB) */
    --blackout: #0a0402;   /* 最後の暗転の色 */

    /* JS が毎フレーム書き換える値 */
    --spot: 0vmin;       /* スポットライトの広がり */
    --title-op: 0;
    --title-blur: 7px;
    --hint-op: 0;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  
  

  :host{
    font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
    background:var(--dark);
  }

  /* 背面は固定。スクロール量はこの空白が担当します */
  .scroll-space{ height:900vh; }

  .stage{
    position:fixed;
    inset:0;
    height:100svh;
    background:var(--dark);
    overflow:hidden;
    isolation:isolate;
    z-index:0;
  }

  /* ---------- スポットライトのマスク ----------
     radial-gradient のマスクを --spot で広げます。
     停止点を多段にしてあるので、円の輪郭が出ず光が滲むように開きます。 */
  .reveal{
    position:absolute;
    inset:0;
    --edge: radial-gradient(circle at 50% 50%,
        rgba(0,0,0,1)   0%,
        rgba(0,0,0,.97) 20%,
        rgba(0,0,0,.78) 36%,
        rgba(0,0,0,.46) 52%,
        rgba(0,0,0,.18) 66%,
        rgba(0,0,0,.05) 76%,
        rgba(0,0,0,0)   86%);
    -webkit-mask-image:var(--edge);       mask-image:var(--edge);
    -webkit-mask-repeat:no-repeat;        mask-repeat:no-repeat;
    -webkit-mask-position:center;         mask-position:center;
    -webkit-mask-size:var(--spot) var(--spot);
            mask-size:var(--spot) var(--spot);
  }

  /* ---------- 背面のビジュアル ---------- */
  .scene{
    position:absolute;
    inset:0;
    filter:brightness(var(--brightness)) contrast(1.08) saturate(.86);
    animation:breathe 18s ease-in-out 4s infinite;
  }
  @keyframes breathe{
    0%,100%{ filter:brightness(var(--brightness)) contrast(1.08) saturate(.86); }
    50%    { filter:brightness(calc(var(--brightness) * 1.18)) contrast(1.08) saturate(.9); }
  }

  /* ▼ 差し替えポイント ------------------------------------------------
     <img class="media"> を <video class="media"> に置き換えれば動画になります。
     例）<video class="media" src="loop.mp4" autoplay muted loop playsinline></video>
     その場合は素材側に動きがあるので .media の animation は外してください。
     ------------------------------------------------------------------ */
  .media{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center;
    transform-origin:50% 50%;
    animation:drift 30s ease-in-out 1s infinite alternate;
  }
  @keyframes drift{
    from{ transform:scale(1.10) translate(1.2%, .6%); }
    to  { transform:scale(1.02) translate(-1%, -.8%); }
  }

  /* ---------- 光そのもののにじみ ---------- */
  .glow{
    position:absolute; inset:0;
    background:radial-gradient(circle calc(var(--spot) * .62) at 50% 50%,
      rgba(255,238,208,.06)  0%,
      rgba(255,232,196,.03) 34%,
      rgba(220,225,255,.012) 62%,
      rgba(0,0,0,0) 100%);
    pointer-events:none;
  }

  /* ---------- 黒ヴェール＋ヴィネット ---------- */
  .veil{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 78% 78% at 50% 50%,
        rgba(var(--dark-edge),0)   0%,
        rgba(var(--dark-edge),.26) 48%,
        rgba(var(--dark-edge),.66) 76%,
        rgba(var(--dark-edge),.90) 100%),
      rgba(var(--dark-edge),var(--veil));
    pointer-events:none;
  }

  /* ---------- レンズの縁 ---------- */
  .lens{
    position:absolute; inset:-1px;
    box-shadow:
      inset 0 0 clamp(70px,16vmin,220px) clamp(30px,7vmin,110px) rgba(var(--dark-edge),var(--lens)),
      inset 0 0 clamp(24px,5vmin,70px)  clamp(4px,1vmin,16px)   rgba(var(--dark-edge),.98);
    pointer-events:none;
  }

  /* ---------- 文字まわり共通 ---------- */
  .type{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:min(92vw,1080px);
    text-align:center;
    pointer-events:none;
    z-index:2;
  }

  /* Wine Cellar */
  .title{
    opacity:var(--title-op);
    filter:blur(var(--title-blur));
  }
  /* 中央が奥へ沈む凹面の歪み。文字ごとに奥行きを与えます */
  .title__main, .title__sub{
    perspective:270px;  /* JS が上書きします */
    transform-style:preserve-3d;
  }
  .title__main span, .title__sub span{
    display:inline-block;
    white-space:pre;
    transform-style:preserve-3d;
  }

  .title__main{
    font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
    font-weight:300;
    font-size:clamp(2.6rem,8.6vw,6.8rem);
    line-height:1;
    letter-spacing:-.03em;
    color:var(--gold);
    text-shadow:0 0 46px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6);
    transform: scaleX(3);
  }
  .title__sub{
    margin-top:3em;
    font-size:clamp(.78rem,1.9vw,1.06rem);
    font-weight:400;
    letter-spacing:.003em;
    text-indent:.34em;
    color:#e3d2b2;
    text-shadow:0 0 26px rgba(0,0,0,.9);
    transform: scaleX(3);
  }


  /* 左右に分かれる2行 */
  .split{ opacity:0; }
  .split p{
    font-size:clamp(1.6rem,3.23vw,4.4rem);  /* 1920px時に約62px */
    font-weight:400;
    letter-spacing:.22em;
    text-indent:.22em;
    color:#ecdcbd;
    text-shadow:0 0 34px rgba(var(--dark-edge),.92), 0 0 12px rgba(var(--dark-edge),.7);
    will-change:transform, filter;
  }
  .split__a{ margin-bottom:1.6em; }

  /* 本文 */
  .body-copy{
    opacity:0;
    font-size:var(--font-size22);   /* 1920px時に約24px */
    font-weight:400;
    line-height:2.6;
    letter-spacing:.16em;
    text-indent:.16em;
    color:#e8dac0;
    text-shadow:0 0 30px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8);
  }
  .body-copy span{
    opacity:.1;
    will-change:opacity;
  }

  /* ---------- スクロールの手がかり ---------- */
  .hint{
    position:absolute;
    left:50%; bottom:clamp(20px,4vh,44px);
    transform:translateX(-50%);
    font-family:"Cormorant Garamond",serif;
    font-size:.7rem;
    letter-spacing:.36em;
    text-indent:.36em;
    color:#9c8d76;
    opacity:var(--hint-op);
    z-index:2;
    pointer-events:none;
  }
  .hint::after{
    content:"";
    display:block;
    width:1px; height:34px;
    margin:12px auto 0;
    background:linear-gradient(180deg,rgba(190,170,140,.7),rgba(190,170,140,0));
    transform-origin:top;
    animation:drop 2.6s ease-in-out infinite;
  }
  @keyframes drop{
    0%{ transform:scaleY(0); opacity:0 }
    35%{ transform:scaleY(1); opacity:1 }
    100%{ transform:scaleY(1) translateY(34px); opacity:0 }
  }

  /* ---------- グレイン（最前面） ----------
     feTurbulence で作ったタイルを敷き詰めています。
     stitchTiles="stitch" なのでタイルの継ぎ目は出ません。 */
  /* 粒はマスクとして敷き、色は background-color で与えます。
     こうすると色だけをスクロールで変えられます。 */
  .grain{
    position:absolute; inset:0;
    z-index:5;
    pointer-events:none;
    opacity:var(--grain-opacity,1);
    background-color:var(--grain-color,#6b1d10);
    -webkit-mask-repeat:repeat; mask-repeat:repeat;
  }

  /* ---------- 最後の暗転 ---------- */
  .blackout{
    position:absolute; inset:0;
    z-index:6;
    background:var(--blackout);
    opacity:0;
    pointer-events:none;
  }

  /* ---------- 調整パネル（納品時は削除してください） ---------- */
  .panel{
    position:absolute;
    right:clamp(12px,2vw,24px); bottom:calc(clamp(12px,2vh,24px) + 44px);
    z-index:10;
    width:252px;
    padding:14px 16px 16px;
    background:rgba(14,12,10,.88);
    border:1px solid rgba(200,180,150,.16);
    border-radius:4px;
    backdrop-filter:blur(8px);
    font-family:"Helvetica Neue",sans-serif;
    color:#b3a691;
    font-size:11px;
    max-height:min(74vh,560px);
    overflow-y:auto;
    display:none;
  }
  .panel[data-open="true"]{ display:block; }
  .panel h2{
    font-size:10px; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase;
    color:#8a7d69; margin-bottom:12px;
  }
  .panel h2 + h2, .panel .row + h2{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(200,180,150,.14);
  }
  .row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .row label{ flex:0 0 72px; }
  .row input[type=range]{ flex:1; accent-color:#c2a870; height:2px; }
  .row input[type=color]{ width:34px; height:20px; padding:0; border:0; background:none; }
  .row select{
    flex:1; background:#191512; color:#c6b89f;
    border:1px solid rgba(200,180,150,.2); border-radius:2px;
    padding:3px 4px; font-size:11px;
  }
  .row output{ flex:0 0 30px; text-align:right; color:#7e7361; font-variant-numeric:tabular-nums; }

  .tools{
    position:absolute;
    right:clamp(12px,2vw,24px); bottom:clamp(12px,2vh,24px);
    z-index:11;
    display:flex; gap:8px;
    opacity:var(--hint-op);
  }
  .tools button{
    padding:8px 13px;
    background:rgba(10,9,8,.6);
    border:1px solid rgba(200,180,150,.22);
    border-radius:2px;
    color:#8f8270;
    font-family:"Helvetica Neue",sans-serif;
    font-size:10px;
    letter-spacing:.2em; text-indent:.2em;
    cursor:pointer;
    transition:color .3s,border-color .3s;
  }
  .tools button:hover,.tools button:focus-visible{ color:#efe3d2; border-color:rgba(200,180,150,.5); }
  .tools button:focus-visible{ outline:2px solid #b08d5a; outline-offset:3px; }

  @media (prefers-reduced-motion: reduce){
    .scene,.media,.hint::after{ animation:none; }
    .media{ transform:scale(1.04); }
  }

:host{display:block;}

/* 理想画像の左右が大きく中央が沈む形に合わせ、横幅とサブタイトルの歪みを独立させる。 */
:host{position:relative;z-index:1;background:transparent;}
.stage{opacity:0;visibility:hidden;background:#000000;}/*#1c0a16*/
.type.title{width:92vw;top:51.2%;}
.title__main{font-family:"Shippori Mincho",serif;font-size:clamp(48px,9.4vw,180px);letter-spacing:.08em;white-space:nowrap;transform:scaleX(.8);color:#ad806c;font-weight:400;}
.title__sub{margin-top:.5em;font-size:clamp(12px,1.1vw,21px);transform:none;letter-spacing:.32em;color:#ba8c76;}
.title__sub::before,.title__sub::after{content:"―";margin:0 1.2em;}
@media(max-width:600px){.title__main{font-size:10.8vw;transform:none;}.title__sub{font-size:2.7vw;letter-spacing:.18em;}.type{width:94vw;}.body-copy{font-size:3.2vw;letter-spacing:.06em;}}