@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   ATLA 肌密館 — blocks.css
   區 塊 版 面

   ★ 這個檔案不需要修改。

   一段對應一種 Block。
   每一段都只管自己的版面，不影響其他區塊，
   所以任何 Block 搬到任何位置都不會跑版。

     Block：hero      第一屏
     Block：explore   肌膚探索
     Block：method    保養方式
     Block：story     真實故事
     Block：belief    品牌理念
     Block：marks     ATLA 的累積
     Block：faq       常見問題
     Block：product   商品
     Block：cta       結尾行動
     Block：quote     單句金句（通用）
     Block：notice    提示框（通用）
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   Block：hero — 第一屏
   ═══════════════════════════════════════════ */
[data-block="hero"]{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;overflow:hidden;
  color:var(--white);isolation:isolate;padding-block:0;
}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__still{position:absolute;inset:-4%;display:block;background-color:#3B4A40}
.hero__still img{width:100%;height:100%;object-fit:cover}
.hero__video{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease)}
.hero__video.is-playing{opacity:1}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(30,40,34,.42) 0%,rgba(30,40,34,.16) 34%,rgba(30,40,34,.58) 100%)}

.hero__body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:96px var(--gutter) 0;gap:clamp(16px,3vh,32px)}
.hero__title{font-size:var(--t-hero);font-weight:700;line-height:1.2;letter-spacing:.08em;
  text-shadow:0 2px 32px rgba(20,28,22,.35)}
.hero__sub{font-size:var(--t-lead);font-weight:600;line-height:1.4;letter-spacing:.06em;
  color:rgba(255,255,255,.9);max-width:24ch}
.hero__product{display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1.5vw,20px)}
.hero__product img{width:auto;height:clamp(180px,32vh,400px);
  filter:drop-shadow(0 32px 48px rgba(16,24,18,.5))}
.hero__product img:last-child{height:clamp(160px,29vh,360px)}

.hero__cue{display:flex;flex-direction:column;align-items:center;gap:var(--s1);
  padding-bottom:clamp(24px,5vh,48px);color:rgba(255,255,255,.88);
  position:relative;z-index:2;transition:color var(--d-hover) var(--ease)}
.hero__cue:hover{color:var(--white)}
.hero__cue .label{font-size:var(--t-note);font-weight:500;letter-spacing:.2em}


/* ═══════════════════════════════════════════
   Block：explore — 肌膚探索
   ═══════════════════════════════════════════ */
.explore__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.explore__opt{
  padding:24px;border-radius:var(--r-btn);background:var(--white);border:1px solid var(--line);
  font-size:var(--t-h3);font-weight:600;letter-spacing:.06em;color:var(--ink);text-align:center;
  transition:transform var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease),
             background var(--d-hover) var(--ease),border-color var(--d-hover) var(--ease),
             color var(--d-hover) var(--ease);
}
.explore__opt:hover{transform:translateY(-4px);box-shadow:var(--sh-1);
  border-color:var(--pink-act);color:var(--navy)}
.explore__opt[aria-expanded="true"]{background:var(--pink);border-color:var(--pink-act);
  color:var(--navy);box-shadow:var(--sh-1)}

.explore__panels{margin-top:var(--s5)}
.myth{
  background:var(--white);border-radius:var(--r-card);padding:clamp(32px,5vw,64px);
  box-shadow:var(--sh-1);max-width:840px;margin-inline:auto;text-align:center;
  opacity:0;transform:translateY(16px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.myth.is-on{opacity:1;transform:none}
.myth[hidden]{display:none}
.myth__mis{font-size:var(--t-h3);font-weight:400;line-height:1.4;color:var(--gray-400);letter-spacing:.04em}
.myth__turn{font-size:var(--t-h2);font-weight:700;line-height:1.3;letter-spacing:.08em;
  color:var(--navy);margin:var(--s3) 0}
.myth__body{font-size:var(--t-body);line-height:1.7;color:var(--ink);max-width:34em;margin-inline:auto}
.myth__more{margin-top:var(--s4);display:inline-flex;flex-direction:column;align-items:center;
  gap:var(--s1);color:var(--navy);font-size:var(--t-btn);font-weight:500;letter-spacing:.06em}


/* ═══════════════════════════════════════════
   Block：method — 保養方式
   ═══════════════════════════════════════════ */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);position:relative}
.step{background:var(--white);border-radius:var(--r-card);padding:clamp(24px,3vw,40px);
  text-align:center;box-shadow:var(--sh-1);position:relative;
  transition:transform var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.step__no{min-width:88px;height:40px;margin:0 auto var(--s3);padding-inline:var(--s2);
  border-radius:999px;background:var(--pink);color:var(--navy);
  font-family:var(--f-en);font-size:var(--t-note);font-weight:600;letter-spacing:.08em;
  display:inline-grid;place-items:center}
.step h3{font-size:var(--t-h3);font-weight:600;letter-spacing:.06em;line-height:1.4}
.step p{margin-top:var(--s2);font-size:var(--t-note);color:var(--gray-400);line-height:1.7}
.step::after{content:"→";position:absolute;top:50%;right:-16px;transform:translate(50%,-50%);
  color:var(--gray-400);font-size:20px}
.step:last-child::after{display:none}
.method__note{margin-top:var(--s5);text-align:center;font-size:var(--t-body);color:var(--ink)}


/* ═══════════════════════════════════════════
   Block：story — 真實故事
   圖片比例 4:3（1200×900）
   ═══════════════════════════════════════════ */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.story{background:var(--white);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease)}
.story:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.story img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--gray-100)}
.story__in{padding:24px;display:flex;flex-direction:column;gap:var(--s2)}
.story__title{font-size:var(--t-h3);font-weight:600;line-height:1.4;letter-spacing:.04em}
.story__excerpt{font-size:var(--t-note);color:var(--gray-400)}


/* ═══════════════════════════════════════════
   Block：belief — 品牌理念
   背景比例 16:9（1600×900）
   ═══════════════════════════════════════════ */
[data-block="belief"]{
  position:relative;min-height:72vh;display:grid;place-items:center;
  padding:var(--s9) var(--gutter);color:var(--white);overflow:hidden;isolation:isolate;
}
[data-block="belief"] > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
[data-block="belief"]::after{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(40,44,42,.34)}
.belief__say{max-width:20ch;text-align:center;font-size:var(--t-h2);font-weight:600;
  line-height:1.5;letter-spacing:.1em;text-shadow:0 2px 28px rgba(20,24,20,.35)}
.belief__say span{display:block}


/* ═══════════════════════════════════════════
   Block：marks — ATLA 的累積
   ═══════════════════════════════════════════ */
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:var(--s6)}
.marks li{text-align:center;padding-inline:var(--s2)}
.marks h3{font-size:var(--t-h3);font-weight:600;line-height:1.4;letter-spacing:.06em;color:var(--navy)}
.marks p{margin-top:var(--s1);font-size:var(--t-note);color:var(--gray-400);line-height:1.7}


/* ═══════════════════════════════════════════
   Block：faq — 常見問題
   ═══════════════════════════════════════════ */
.faq{max-width:840px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);background:var(--white)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:24px 48px 24px 0;
  font-size:var(--t-h3);font-weight:600;line-height:1.4;letter-spacing:.04em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:22px;font-size:24px;
  font-weight:400;color:var(--pink-act)}
.faq details[open] summary::after{content:"–";color:var(--navy)}
.faq summary:hover{color:var(--navy)}
.faq p{padding:0 0 24px;font-size:var(--t-body);line-height:1.7;color:var(--ink);max-width:56em}


/* ═══════════════════════════════════════════
   Block：product — 商品
   去背 PNG，建議高度 1400px
   ═══════════════════════════════════════════ */
[data-block="product"]{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  min-height:640px;padding-block:0;
}
.product__ph{position:relative;height:100%;min-height:440px;background:var(--gray-100);
  display:grid;place-items:center;padding:clamp(24px,4vw,64px)}
.product__ph img{width:auto;max-width:100%;height:auto;max-height:520px;object-fit:contain}
.product__tx{padding:clamp(40px,6vw,96px)}
[data-block="product"].is-flip .product__ph{order:2}
.product__tag{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--pink);
  color:var(--navy);font-size:var(--t-note);font-weight:500;letter-spacing:.08em}
.product__name{margin-top:var(--s3);font-size:var(--t-h2);font-weight:700;
  letter-spacing:.06em;line-height:1.3}
.product__step{margin-top:var(--s2);font-size:var(--t-note);color:var(--gray-400);letter-spacing:.06em}
.product__desc{margin-top:var(--s4);font-size:var(--t-h3);font-weight:400;line-height:1.7;
  letter-spacing:.04em;max-width:22em}
.product__btn{margin-top:var(--s5)}


/* ═══════════════════════════════════════════
   Block：cta — 結尾行動
   背景比例 16:9（1600×900）
   ═══════════════════════════════════════════ */
[data-block="cta"]{
  position:relative;text-align:center;padding-block:clamp(80px,10vw,160px);
  padding-inline:var(--gutter);overflow:hidden;isolation:isolate;
}
[data-block="cta"] > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
[data-block="cta"]::after{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.78)}
.cta__line{font-size:var(--t-h2);font-weight:600;line-height:1.5;letter-spacing:.08em;
  max-width:24ch;margin-inline:auto;color:var(--ink)}
.cta__btns{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center}


/* ═══════════════════════════════════════════
   Block：quote — 單句金句（通用，可插在任何位置）
   ═══════════════════════════════════════════ */
.quote__say{
  max-width:22ch;margin-inline:auto;text-align:center;
  font-size:var(--t-h2);font-weight:600;line-height:1.5;letter-spacing:.1em;color:var(--ink);
}


/* ═══════════════════════════════════════════
   Block：notice — 提示框（通用，可插在任何位置）
   ═══════════════════════════════════════════ */
.notice{
  max-width:720px;margin-inline:auto;
  background:var(--pink);border-radius:var(--r-card);padding:clamp(24px,3vw,32px);
}
.notice h3{font-size:var(--t-h3);font-weight:600;letter-spacing:.06em;color:var(--navy)}
.notice p{margin-top:var(--s2);font-size:var(--t-body);line-height:1.7;color:var(--ink)}


/* ═══════════════════════════════════════════
   手機版
   ═══════════════════════════════════════════ */
@media (max-width:900px){
  .explore__grid{grid-template-columns:repeat(2,1fr)}
  .stories{grid-template-columns:1fr;gap:var(--s3)}
  .story{display:grid;grid-template-columns:140px 1fr;align-items:center}
  .story img{height:100%;aspect-ratio:1/1}
  .marks{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
  .method{grid-template-columns:1fr;gap:var(--s4)}
  .step::after{content:"↓";top:auto;right:auto;bottom:-16px;left:50%;transform:translate(-50%,50%)}
  [data-block="product"]{grid-template-columns:1fr;min-height:0}
  .product__ph{min-height:56vw;order:1}
  [data-block="product"].is-flip .product__ph{order:1}
  .product__tx{order:2}
}
@media (max-width:520px){
  .explore__grid{grid-template-columns:1fr}
  .explore__opt{padding:16px 24px}
  .marks{grid-template-columns:1fr;gap:var(--s4);padding-block:var(--s5)}
  .cta__btns .btn{width:100%}
}