/* creation-light — time-based cinematic, this card only. Large, high-contrast type. */
.theo-stage.theo-cine{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:20px;
  overflow:hidden;
  background:#000;
  margin:0 0 28px;
  isolation:isolate;
  touch-action:pan-y;
  color:#fff;
  font-family:"Noto Serif KR","Noto Serif",Georgia,"Times New Roman",serif;
  box-sizing:border-box;
}
@media (max-width:820px){
  .theo-stage.theo-cine{
    aspect-ratio:auto;
    height:72svh;
    min-height:560px;
    max-height:100svh;
    border-radius:16px;
  }
}
.theo-cine-canvas, .cine-still{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;
}
.cine-still{z-index:1;opacity:0;transition:opacity .6s ease}
.theo-cine.is-still .cine-still{opacity:1}
.theo-cine.is-still .theo-cine-canvas{opacity:0}

.cine-grain{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.1;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  animation:cine-grain 0.7s steps(2) infinite;
}
@keyframes cine-grain{to{transform:translate3d(-1%,1%,0)}}
.cine-letterbox{position:absolute;inset:0;z-index:5;pointer-events:none}
.cine-letterbox i{
  position:absolute;left:0;right:0;height:4%;background:#000;
}
@media (max-width:820px){
  .cine-letterbox i{height:3%;}
}
.theo-cine.is-hold .cine-letterbox i{height:2.2%;}
.cine-letterbox i:first-child{top:0}
.cine-letterbox i:last-child{bottom:0}

.cine-scrim{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  transition:opacity .7s ease;
  background:
    radial-gradient(ellipse 58% 48% at 50% 48%, rgba(0,0,0,.66) 0%, rgba(0,0,0,.4) 42%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.08) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 28%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.2) 100%);
}
.theo-cine.is-hold .cine-scrim,
.theo-cine.is-bright .cine-scrim{opacity:1}

/* HUD: in-flow stack, safe padding, never clip the pill */
.cine-hud{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:max(28px, 5.5%) 5.5% max(28px, 7%);
  box-sizing:border-box;
}
.cine-cluster{
  position:relative;
  width:100%;
  max-width:min(40em, 92%);
  display:flex;flex-direction:column;align-items:center;
  gap:.55em;
  box-sizing:border-box;
}
@media (max-width:820px){
  .cine-hud{padding:max(36px, 6.5svh) 5% max(32px, 7svh);}
  .cine-cluster{max-width:18.5em;}
}

.cine-verse{
  word-break:keep-all;overflow-wrap:break-word;
  font-weight:700;letter-spacing:-.01em;line-height:1.6;
  font-size:clamp(26px, 2.15vw, 34px);
  color:#fff;
  width:100%;max-width:100%;
  opacity:0;transform:translateY(8px);
  text-shadow:0 2px 16px rgba(0,0,0,.92), 0 1px 4px rgba(0,0,0,.85);
}
@media (max-width:820px){
  .cine-verse{font-size:26px;}
}
.cine-verse.is-on{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}
.cine-verse .vline{
  display:block;
  opacity:0;
  transform:translateY(10px);
  filter:blur(5px);
}
.cine-verse .vline.is-lit{
  opacity:1;
  transform:none;
  filter:none;
  transition:opacity .7s ease, transform .75s cubic-bezier(.16,1,.3,1), filter .7s ease;
}
.cine-verse .vline-inner{
  display:inline;
  color:#fff;
  -webkit-text-fill-color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.92), 0 0 22px rgba(255,210,120,.0);
}
.cine-verse .vline.is-lit .vline-inner{
  animation:cine-sweep 1.15s ease forwards;
}
.cine-verse.is-steady .vline.is-lit .vline-inner,
.cine-verse.is-steady .vline-inner{
  animation:none;
  background:none;
  color:#fff;
  -webkit-text-fill-color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.92), 0 1px 4px rgba(0,0,0,.85), 0 0 18px rgba(255,214,140,.28);
}
@keyframes cine-sweep{
  0%{
    color:#fff7e0;
    -webkit-text-fill-color:#fff7e0;
    text-shadow:0 2px 16px rgba(0,0,0,.92), 0 0 28px rgba(255,210,120,.9);
  }
  55%{
    color:#ffe7b0;
    -webkit-text-fill-color:#ffe7b0;
    text-shadow:0 2px 16px rgba(0,0,0,.92), 0 0 26px rgba(255,214,140,.75);
  }
  100%{
    color:#fff;
    -webkit-text-fill-color:#fff;
    text-shadow:0 2px 16px rgba(0,0,0,.92), 0 1px 4px rgba(0,0,0,.85), 0 0 18px rgba(255,214,140,.28);
  }
}

.cine-verse-ref{
  margin:0;
  font-size:16px;font-weight:600;line-height:1.6;letter-spacing:.04em;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.9);
  opacity:0;
}
.cine-verse-ref.is-on{opacity:1;transition:opacity 1s ease}

.cine-prompt{
  position:static;
  transform:none;
  width:auto;max-width:100%;
  margin:0 0 .15em;
  appearance:none;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.5);
  border-radius:999px;
  font:700 19px/1.45 "Noto Serif KR","Noto Serif",Georgia,serif;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.85), 0 0 16px rgba(255,220,150,.35);
  opacity:0;
  pointer-events:none;
  cursor:pointer;
  padding:.55em 1.2em;
  word-break:keep-all;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  box-sizing:border-box;
}
.cine-prompt.is-on{
  opacity:1;
  pointer-events:auto;
  transition:opacity 1.45s ease;
  animation:cine-prompt-pulse 2.4s ease-in-out 1.45s infinite;
}
@keyframes cine-prompt-pulse{
  0%,100%{box-shadow:0 4px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(255,236,196,.0)}
  50%{box-shadow:0 4px 18px rgba(0,0,0,.35), 0 0 16px 2px rgba(255,220,150,.35)}
}
.cine-bless{display:none}

.cine-amen{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:700;letter-spacing:.06em;
  font-size:clamp(2.6rem,11vw,5.4rem);
  opacity:0;transform:scale(.92);
  text-shadow:0 0 40px rgba(255,200,110,.35), 0 8px 36px rgba(0,0,0,.65);
  color:#fff;
  pointer-events:none;
  padding:0 8%;
  gap:.6em;
}
.cine-amen.is-ko{letter-spacing:.04em}
.cine-amen.is-on{opacity:1;transform:none;transition:opacity 1.2s ease, transform 1.4s cubic-bezier(.16,1,.3,1)}

.cine-thanks{
  position:absolute;left:6%;right:6%;bottom:11%;z-index:7;
  text-align:center;
  font-weight:600;font-size:20px;line-height:1.6;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.92), 0 1px 4px rgba(0,0,0,.8);
  opacity:0;transform:translateY(10px);
  pointer-events:none;
  word-break:keep-all;overflow-wrap:break-word;
  max-width:28em;margin:0 auto;
}
@media (max-width:820px){
  .cine-thanks{font-size:20px;bottom:10%;}
}
.cine-thanks.is-on{opacity:1;transform:none;transition:opacity 1.1s ease, transform 1.1s ease}

.cine-caption{
  position:absolute;left:0;right:0;bottom:12%;z-index:7;
  text-align:center;padding:0 8%;pointer-events:none;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s ease, transform .75s cubic-bezier(.16,1,.3,1);
  max-width:100%;
}
.cine-caption.is-on{opacity:1;transform:none}
.cine-caption.is-off{opacity:0;transform:translateY(-6px)}
.cine-caption .line{
  word-break:keep-all;overflow-wrap:break-word;
  font-family:"Noto Serif KR","Noto Serif",Georgia,serif;
  font-size:22px;line-height:1.6;font-weight:600;color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.8);
  max-width:18em;margin:0 auto;display:block;
}
.cine-caption .ref{
  display:block;margin-top:.4em;
  font-size:16px;font-weight:600;line-height:1.6;
  letter-spacing:.04em;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.9);
}
.cine-fade{position:absolute;inset:0;z-index:2;pointer-events:none;background:#000;opacity:0}
.cine-iris{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 48%, transparent 0%, transparent var(--iris, 92%), #000 100%);
  opacity:1;
}
.cine-replay{
  position:absolute;right:14px;bottom:calc(6% + 10px);z-index:8;
  appearance:none;border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.5);color:#fff;
  font:700 16px/1 "Noto Sans KR","Noto Sans",system-ui,sans-serif;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .4s ease, background .2s;
}
.cine-replay.is-on{opacity:1;pointer-events:auto}
.cine-replay:hover,.cine-replay:focus{background:rgba(20,14,6,.75);outline:2px solid #fff}

.theo-cine.is-finale .cine-verse,
.theo-cine.is-finale .cine-prompt,
.theo-cine.is-finale .cine-verse-ref,
.theo-cine.is-finale .cine-caption,
.theo-cine.is-finale .cine-scrim{
  opacity:0!important;pointer-events:none!important;transition:opacity .7s ease;
}

@media (prefers-reduced-motion: reduce){
  .cine-grain,.cine-prompt.is-on{animation:none!important}
  .cine-verse .vline.is-lit .vline-inner{animation:none!important}
  .cine-verse.is-on,.cine-prompt.is-on,.cine-amen.is-on,.cine-caption.is-on,.cine-verse-ref.is-on,.cine-thanks.is-on{
    transition:opacity .5s ease;filter:none!important;transform:none!important;
  }
}
.theo-cine.is-thanks .cine-amen.is-on{transform:translateY(-9%);}

.cine-dots{
  position:absolute;left:0;right:0;bottom:max(8px, 2.8%);z-index:8;
  display:flex;justify-content:center;align-items:center;gap:2px;
  pointer-events:auto;padding:0 8%;box-sizing:border-box;
}
.cine-dot{
  appearance:none;border:0;background:transparent;cursor:pointer;
  width:32px;height:32px;padding:0;position:relative;flex:none;
}
.cine-dot::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.42);
  box-shadow:0 0 6px rgba(0,0,0,.45);
}
.cine-dot.is-on::after{background:#fff;width:9px;height:9px;}
.cine-dot:focus{outline:none}
.cine-dot:focus-visible::after{outline:2px solid #fff;outline-offset:3px}
.theo-cine.is-finale .cine-dots{opacity:0;pointer-events:none}

.cine-cue{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.92);
  z-index:9;pointer-events:none;
  width:68px;height:68px;border-radius:50%;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  opacity:0;transition:opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
  display:flex;align-items:center;justify-content:center;
}
.cine-cue.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cine-cue i{display:block;width:22px;height:22px;background:no-repeat center/contain}
.cine-cue.is-pause i{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='4' width='5' height='16' rx='1.2' fill='white'/><rect x='14' y='4' width='5' height='16' rx='1.2' fill='white'/></svg>");
}
.cine-cue.is-play i{
  margin-left:3px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M7 4.5v15l13-7.5z'/></svg>");
}
@media (prefers-reduced-motion: reduce){
  .cine-cue{transition:opacity .2s ease}
}

/* Praying hands: fade in with Amen, upper safe zone, never cover Amen or thanks. */
.cine-hands{
  position:absolute;left:50%;top:8%;
  transform:translateX(-50%);
  width:min(38vmin, 260px);height:min(38vmin, 260px);
  background:url("/page/img/theology/cinematic/creation-light/hands.webp") center/contain no-repeat;
  opacity:0;pointer-events:none;z-index:5;
  filter:drop-shadow(0 0 16px rgba(255,200,80,.28));
  mix-blend-mode:screen;
  transition:opacity 1.6s ease;
}
.cine-hands.is-on{opacity:.38;}
@media (min-aspect-ratio: 1/1){
  .cine-hands{top:4%;width:min(28vmin,200px);height:min(28vmin,200px);}
}