/* BIN ARIFF — Chapter 01: cinematic frame hold / play continuation.
   Full-bleed frame of the original 03_break_the_seal.mp4 is the interactive artwork.
   In held state the same <video> stays paused at frame zero; on interaction it
   is promoted above the scene and plays without reloading or replacing media. */
.device[data-step="2"]{
  background:#010704;
}
.device[data-step="2"] .film-overlay.seal-held{
  display:flex !important;
  z-index:0;
  opacity:1;
  pointer-events:none;
  background:#010704 url('../media/poster_seal.jpg') 50% 50%/cover no-repeat;
}
.film-overlay.seal-held .film-top,
.film-overlay.seal-held .film-bottom{
  display:none;
}
.film-overlay.seal-held::after,
.film-overlay.seal-resumed::after{
  background:linear-gradient(180deg,
    rgba(0,5,3,.86) 0%,
    rgba(0,5,3,.55) 16%,
    rgba(0,5,3,.035) 32%,
    rgba(0,5,3,.015) 63%,
    rgba(0,5,3,.58) 79%,
    rgba(0,5,3,.90) 100%);
}
.film-overlay.seal-held video,
.film-overlay.seal-resumed video{
  object-fit:cover;
  object-position:50% 50%;
  filter:contrast(1.07) saturate(1.05) brightness(.96);
}
.film-overlay.seal-resumed{
  transition:none;
  opacity:1;
}
.device[data-step="2"] .ambient{opacity:.08}
.device[data-step="2"] .scene.s2{
  isolation:isolate;
  padding-top:clamp(89px,11svh,106px);
  padding-bottom:max(80px,env(safe-area-inset-bottom) + 70px);
}
.device[data-step="2"] .scene.s2 .scene-content{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
}
.device[data-step="2"] .s2 .brand{
  margin:0 0 0 !important;
  gap:5px !important;
}
.device[data-step="2"] .s2 .brand-icon{
  height:43px;
  width:41px;
}
.device[data-step="2"] .s2 .brand .wordmark{font-size:11.5px;letter-spacing:.25em}
.device[data-step="2"] .s2 .seal-chapter{
  margin-top:clamp(17px,3.2svh,27px) !important;
  margin-bottom:7px;
  font-size:10px;
  letter-spacing:.15em;
  font-weight:700;
  color:#ecd19a;
}
.device[data-step="2"] .s2 .seal-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(39px,9.3vw,49px);
  line-height:1.08;
  letter-spacing:-.052em;
  margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
  white-space:nowrap;
  text-align:center;
}
.device[data-step="2"] .s2 .seal-title em{
  font-style:italic;
  font-weight:400;
  color:#e2bf84;
}
.device[data-step="2"] .s2 .seal-stage{
  position:relative;
  width:100%;
  min-height:210px;
  height:auto;
  max-width:unset;
  flex:1 1 auto;
  background:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  margin:6px 0 0;
  border:0;
  filter:none !important;
  transform:none !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.device[data-step="2"] .s2 .seal-stage > *{display:none}
.device[data-step="2"] .s2 .seal-stage:focus-visible{
  outline:2px solid rgba(225,190,126,.9);
  outline-offset:-8px;
  border-radius:12px;
}
.device[data-step="2"] .s2 .seal-stage::after{
  content:'TAP THE SEAL';
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  padding:6px 14px;
  border-radius:30px;
  background:rgba(1,14,9,.62);
  border:1px solid rgba(208,181,126,.25);
  color:#efdab1;
  font:700 10px/1.5 var(--sans);
  letter-spacing:.12em;
  white-space:nowrap;
  box-shadow:0 5px 18px rgba(0,0,0,.25);
}
.device[data-step="2"] .s2 .seal-actions{
  flex:0 0 auto;
  width:min(100%,430px);
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:auto;
  padding-bottom:0;
}
.device[data-step="2"] .s2 .seal-instruction{
  font-size:11px;
  letter-spacing:.17em;
  font-weight:700;
  color:#efd9a9;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
  text-align:center;
}
.device[data-step="2"] .s2 .slider{
  height:66px;
  width:100%;
  background:rgba(3,20,13,.82);
  border-radius:999px;
  border:1px solid rgba(226,196,131,.62);
  box-shadow:0 12px 28px rgba(0,0,0,.3),inset 0 1px 0 rgba(245,217,161,.06);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  user-select:none;
  touch-action:none;
}
.device[data-step="2"] .s2 .slider-progress{
  border-radius:999px;
  background:linear-gradient(90deg,rgba(215,182,117,.14),rgba(230,205,150,.30));
  transition:width .08s linear;
}
.device[data-step="2"] .s2 .slider-thumb{
  width:54px;
  height:54px;
  top:5px;
  left:5px;
  border-radius:50%;
  border:1px solid #edd7a2;
  color:#11231b;
  font-size:23px;
  font-weight:400;
  background:linear-gradient(135deg,#f2dfb2,#d7b978 54%,#ad884e);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 2px 10px rgba(0,0,0,.4);
}
.device[data-step="2"] .s2 .slider-hint{
  font:700 12px/1.4 var(--sans);
  letter-spacing:.055em;
  padding-left:56px;
  color:#f1e8d4;
  white-space:nowrap;
}
.device[data-step="2"] .s2 .seal-micro{
  text-align:center;
  font-size:10px;
  line-height:1.6;
  color:#c4c6b8;
  letter-spacing:.075em;
}
.device[data-step="2"] .s2 .slider[aria-disabled="true"]{opacity:.66;pointer-events:none}
.device[data-step="2"] .progress-dots{bottom:27px}
@media(max-width:385px){
  .device[data-step="2"] .s2 .seal-title{font-size:38px}
  .device[data-step="2"] .s2 .slider-hint{font-size:11px;letter-spacing:0}
  .device[data-step="2"] .s2 .seal-instruction{font-size:10px}
}
@media(max-height:740px){
  .device[data-step="2"] .scene.s2{
    padding-top:max(64px,env(safe-area-inset-top) + 57px);
    padding-bottom:max(61px,env(safe-area-inset-bottom) + 54px);
  }
  .device[data-step="2"] .s2 .brand-icon{height:32px;width:32px}
  .device[data-step="2"] .s2 .seal-chapter{margin-top:9px!important;margin-bottom:5px;font-size:9px}
  .device[data-step="2"] .s2 .seal-title{font-size:36px}
  .device[data-step="2"] .s2 .seal-stage{min-height:155px}
  .device[data-step="2"] .s2 .seal-stage::after{bottom:0;font-size:9px}
  .device[data-step="2"] .s2 .seal-actions{gap:7px}
  .device[data-step="2"] .s2 .slider{height:61px}
  .device[data-step="2"] .s2 .slider-thumb{height:50px;width:50px}
  .device[data-step="2"] .s2 .seal-micro{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .film-overlay.seal-resumed{transition:none}
}