/* ============================================================
   เว็บภาพโมเสกเคลื่อนไหว — หลวงพ่อวิริยังค์ สิรินฺธโร
   ============================================================ */
@import url('assets/fonts.css');

:root{
  --gold:#e6c26b;
  --gold-bright:#f7e3a1;
  --gold-deep:#b8912f;
  --ink:#0b0805;
  --ink2:#161009;
  --glow: 0 0 22px rgba(230,194,107,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(120% 90% at 50% 8%, #241a0e 0%, #120c06 45%, #070502 100%);
  color:#f3e7c9;
  font-family:'Noto Sans Thai',sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- เวที 3D ---------- */
#stage{
  position:fixed; inset:0;
  perspective:1400px;
  perspective-origin:50% 42%;
  overflow:hidden;
}
/* พื้นผิวลายจาง ๆ */
#stage::before{
  content:""; position:absolute; inset:-10%;
  background-image:
    repeating-linear-gradient(45deg, rgba(230,194,107,.035) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(230,194,107,.028) 0 2px, transparent 2px 22px);
  opacity:.5; pointer-events:none;
}
/* แสงเรืองกลางเวที */
#halo{
  position:absolute; left:50%; top:50%; z-index:11;
  width:70vmin; height:70vmin; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(247,227,161,.22) 0%, rgba(230,194,107,.09) 38%, transparent 70%);
  filter:blur(8px); opacity:0; pointer-events:none;
}

/* ---------- ผนังภาพเต็มจอ ---------- */
#mosaic{ position:absolute; inset:0; overflow:hidden; }
.tile{
  position:absolute;
  background-size:cover; background-position:center;
  will-change:opacity; opacity:0;
  transition:opacity .35s ease;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}

/* ภาพที่กำลังโชว์เดี่ยว/ไหลลงไปเรียง (คงสัดส่วนเดิม) */
.feat{
  position:absolute; left:0; top:0;
  transform-origin:0 0; will-change:transform,opacity;
  background-size:cover; background-position:center;
  border-radius:6px; overflow:hidden; opacity:0;
  z-index:16; backface-visibility:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.feat.show{
  box-shadow:0 22px 60px rgba(0,0,0,.62),
             0 0 0 2px rgba(230,194,107,.85),
             0 0 34px rgba(247,227,161,.55);
}

/* ---------- การ์ดภาพหลวงพ่อ กลางจอ (จาง ๆ ไม่เพี้ยนสัดส่วน) ---------- */
#portraitCard{
  position:absolute; left:50%; top:50%; z-index:12;
  transform:translate(-50%,-50%); opacity:0; pointer-events:none;
  border-radius:8px; overflow:hidden;
  box-shadow:0 0 0 2px rgba(230,194,107,.55), 0 24px 70px rgba(0,0,0,.7),
             0 0 60px rgba(247,227,161,.35);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 45%, #000 62%, transparent 100%);
          mask-image:radial-gradient(120% 120% at 50% 45%, #000 62%, transparent 100%);
}
#portraitCard img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- กรอบลายไทยทอง ---------- */
#frame{position:fixed; inset:0; pointer-events:none; z-index:20}
#frame svg{width:100%; height:100%; display:block}
.frame-stroke{
  fill:none; stroke:url(#goldgrad); stroke-width:2.2;
  filter:drop-shadow(0 0 6px rgba(230,194,107,.5));
  stroke-dasharray:2600; stroke-dashoffset:2600;
}
.corner{ fill:url(#goldgrad); opacity:0;
  filter:drop-shadow(0 0 6px rgba(230,194,107,.55)); }
.running #frame .frame-stroke{ animation:draw 3.2s ease forwards .3s }
.running #frame .corner{ animation:cornerIn 1.4s ease forwards 1.8s }
@keyframes draw{ to{stroke-dashoffset:0} }
@keyframes cornerIn{ to{opacity:1} }

/* มุมกนกทอง */
.orn{position:absolute; width:clamp(64px,9vw,124px); height:clamp(64px,9vw,124px);
  opacity:0; transition:opacity 1.4s ease .2s;
  filter:drop-shadow(0 0 5px rgba(230,194,107,.5));}
.orn svg{width:100%; height:100%; display:block}
.orn.tl{top:8px; left:8px}
.orn.tr{top:8px; right:8px; transform:scaleX(-1)}
.orn.bl{bottom:8px; left:8px; transform:scaleY(-1)}
.orn.br{bottom:8px; right:8px; transform:scale(-1,-1)}
.running .orn{opacity:.95}

/* ---------- ข้อความ ---------- */
#titles{position:fixed; inset:0; pointer-events:none; z-index:25}
.sammana{ /* สมณศักดิ์ ด้านบน */
  position:absolute; top:5.2vh; left:0; right:0; text-align:center;
  font-family:'Prompt',sans-serif; font-weight:600;
  font-size:clamp(15px,2.4vw,26px); letter-spacing:.14em;
  color:var(--gold-bright);
  text-shadow:0 0 16px rgba(230,194,107,.6), 0 2px 4px #000;
  opacity:0; transform:translateY(-14px);
  transition:opacity 1.2s ease, transform 1.2s ease;
}
.sammana .om{ display:block; font-family:'Mitr'; font-weight:400;
  font-size:.62em; letter-spacing:.3em; color:var(--gold); opacity:.85; margin-bottom:.15em}

.hero{ /* ชื่อหลวงพ่อ กลางจอ -> ล่าง */
  position:absolute; left:0; right:0; top:50%;
  text-align:center; transform:translateY(-50%);
  transition:top 1.6s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease, transform 1.2s ease;
  opacity:0;
}
.hero .name{
  font-family:'Kanit',sans-serif; font-weight:700;
  font-size:clamp(30px,7vw,86px); line-height:1.05;
  background:linear-gradient(180deg,#fff6d8,var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(230,194,107,.45));
}
.hero .thra{
  font-family:'Mitr',sans-serif; font-weight:400;
  font-size:clamp(14px,2.4vw,26px); letter-spacing:.18em;
  color:var(--gold-bright); margin-top:.35em;
  text-shadow:0 0 14px rgba(230,194,107,.5),0 2px 4px #000;
}
.hero .years{
  font-family:'Prompt',sans-serif; font-weight:400;
  font-size:clamp(12px,1.7vw,17px); letter-spacing:.22em;
  color:#e9d9ad; opacity:.0; margin-top:.5em;
  transition:opacity 1.4s ease;
}

/* state helpers */
.show-sammana .sammana{opacity:1; transform:none}
.hero.center{top:44%; opacity:1}
.hero.hidden{opacity:0; transform:translateY(-50%) scale(.96)}
.hero.bottom{top:auto; bottom:clamp(64px,8.5vh,104px); transform:none; opacity:1}
.hero.bottom::before{        /* ฉากมืดจาง ๆ หลังชื่อ ให้อ่านง่าย */
  content:""; position:absolute; left:50%; top:50%; z-index:-1;
  transform:translate(-50%,-50%);
  width:130vw; height:230%;
  background:radial-gradient(ellipse at center, rgba(6,4,1,.78) 0%, rgba(6,4,1,.45) 45%, transparent 72%);
}

/* ---------- ลายเซ็นผู้จัดทำ ---------- */
#sign{
  position:fixed; right:14px; bottom:10px; z-index:30;
  font-family:'Noto Sans Thai',sans-serif; font-weight:400;
  font-size:11px; letter-spacing:.03em; color:rgba(230,194,107,.34);
  pointer-events:none; text-shadow:0 1px 2px #000; opacity:0;
  transition:opacity 2s ease;
}
.running #sign{opacity:1}

/* ---------- หน้าเริ่ม ---------- */
#intro{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; text-align:center; padding:24px;
  background:radial-gradient(120% 100% at 50% 40%, #1b130a 0%, #0a0603 70%);
  transition:opacity 1.1s ease, visibility 1.1s;
}
#intro.gone{opacity:0; visibility:hidden}
#intro .om-top{font-family:'Mitr'; color:var(--gold); letter-spacing:.4em; font-size:clamp(13px,2vw,20px); opacity:.8}
#intro h1{
  font-family:'Prompt',sans-serif; font-weight:600;
  font-size:clamp(18px,3vw,32px); letter-spacing:.1em; color:var(--gold-bright);
  text-shadow:var(--glow);
}
#intro h2{
  font-family:'Kanit',sans-serif; font-weight:700;
  font-size:clamp(34px,8vw,96px); line-height:1.05;
  background:linear-gradient(180deg,#fff7db,var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 30px rgba(230,194,107,.5));
}
#intro .sub{font-family:'Mitr'; color:var(--gold-bright); letter-spacing:.2em; font-size:clamp(14px,2.4vw,24px)}
#startBtn{
  margin-top:10px; cursor:pointer; pointer-events:auto;
  font-family:'Kanit',sans-serif; font-weight:600; font-size:clamp(17px,2.4vw,22px);
  letter-spacing:.14em; color:#241703;
  padding:15px 46px; border:none; border-radius:60px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 45%,var(--gold-deep));
  box-shadow:0 8px 26px rgba(230,194,107,.45),inset 0 1px 2px rgba(255,255,255,.7);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:pulse 2.4s ease-in-out infinite;
}
#startBtn:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 12px 34px rgba(230,194,107,.6)}
@keyframes pulse{50%{box-shadow:0 8px 34px rgba(247,227,161,.75),inset 0 1px 2px rgba(255,255,255,.8)}}
#intro .hint{font-family:'Noto Sans Thai'; font-size:13px; color:#c9b787; opacity:.7}
.intro-frame{position:absolute; inset:18px; border:1px solid rgba(230,194,107,.3); border-radius:6px; pointer-events:none}
.intro-frame::before{content:"๛"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  color:var(--gold); font-size:26px; background:#0a0603; padding:0 10px}

/* ---------- ปุ่มเล่นซ้ำ / เสียง ---------- */
#replay{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:40; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .8s ease; cursor:pointer;
  font-family:'Kanit'; font-weight:600; letter-spacing:.1em; color:#241703;
  padding:9px 26px; font-size:14px; border:none; border-radius:50px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  box-shadow:0 6px 20px rgba(230,194,107,.4);
}
#replay.show{opacity:1; visibility:visible; pointer-events:auto}

@media (max-width:640px){
  .sammana{top:3vh}
  #sign{font-size:10px}
}

/* ---------- ลิงก์กลับสู่เว็บไซต์ ---------- */
#backHome{
  position:fixed; top:clamp(14px,2.4vw,26px); left:clamp(14px,2.4vw,26px); z-index:70;
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Kanit',sans-serif; font-weight:300; font-size:.82rem; letter-spacing:.02em;
  color:var(--gold-bright); text-decoration:none; padding:.5em 1.1em; border-radius:999px;
  border:1px solid rgba(230,194,107,.45);
  background:rgba(10,6,3,.55); backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.4); transition:border-color .3s, background .3s, transform .3s;
}
#backHome:hover{ border-color:var(--gold); background:rgba(230,194,107,.14); transform:translateY(-2px); }
#backHome svg{ width:1.05em; height:1.05em; stroke:var(--gold-bright); fill:none; stroke-width:2; }
@media (max-width:640px){ #backHome span{ display:none; } #backHome{ padding:.55em; } }