/* ===== VARIANT A: "The Front Page" ===== */
/* Premium vintage newspaper editorial intro */

@font-face{font-family:'Quincy CF';src:url('/wp-content/uploads/2025/07/quincy_fc-webfont.woff2') format('woff2');font-weight:normal;font-style:normal}
@font-face{font-family:'The Seasons';src:url('/wp-content/uploads/2025/07/the_seasons-webfont.woff2') format('woff2');font-weight:normal;font-style:normal}

/* ===== MAIN CONTAINER ===== */
#clairify-intro{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:999999;display:flex;
  perspective:1800px;
  pointer-events:none;
}

/* ===== PANELS ===== */
.ci-panel{
  height:100%;
  background:#e6d5bc;
  position:relative;
  backface-visibility:hidden;
  opacity:0;
  overflow:hidden;
}
.ci-panel--left{
  transform-origin:left center;
  animation:ciFadeIn 0.4s ease forwards, ciFoldL 4s cubic-bezier(0.76,0,0.24,1) forwards;
  -webkit-mask-image:
    radial-gradient(circle 14px at calc(100% + 1px) 14px, transparent 13px, black 14px);
  mask-image:
    radial-gradient(circle 14px at calc(100% + 1px) 14px, transparent 13px, black 14px);
  -webkit-mask-size:100% 28px;
  mask-size:100% 28px;
  -webkit-mask-repeat:repeat-y;
  mask-repeat:repeat-y;
}
.ci-panel--right{
  transform-origin:right center;
  animation:ciFadeIn 0.4s ease forwards, ciFoldR 4s cubic-bezier(0.76,0,0.24,1) forwards;
  -webkit-mask-image:
    radial-gradient(circle 14px at -1px 14px, transparent 13px, black 14px);
  mask-image:
    radial-gradient(circle 14px at -1px 14px, transparent 13px, black 14px);
  -webkit-mask-size:100% 28px;
  mask-size:100% 28px;
  -webkit-mask-repeat:repeat-y;
  mask-repeat:repeat-y;
}

@keyframes ciFadeIn{
  0%{opacity:0;transform:scale(0.97)}
  100%{opacity:1;transform:scale(1)}
}

/* Paper grain texture (generated via JS canvas) */
.ci-texture{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background-size:400px 400px;
  background-repeat:repeat;
  pointer-events:none;
  z-index:1;
}

/* Aged paper vignette */
.ci-panel::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(75,58,47,.07) 100%);
  pointer-events:none;z-index:2;
}

/* ===== SCALLOPED EDGE BORDERS ===== */
.ci-scallop{
  position:absolute;top:0;height:100%;width:20px;
  z-index:18;pointer-events:none;
}
.ci-scallop--right{
  right:-10px;
  background:
    radial-gradient(circle 14px at 10px 14px, transparent 12px, #C7B08A 12px, #C7B08A 14px, transparent 14px);
  background-size:20px 28px;
  background-repeat:repeat-y;
}
.ci-scallop--left{
  left:-10px;
  background:
    radial-gradient(circle 14px at 10px 14px, transparent 12px, #C7B08A 12px, #C7B08A 14px, transparent 14px);
  background-size:20px 28px;
  background-repeat:repeat-y;
}

/* ===== FOLD CREASE (center) ===== */
.ci-fold{
  position:fixed;top:0;bottom:0;left:50%;
  width:28px;
  transform:translateX(-50%);
  z-index:1000000;pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(75,58,47,.03) 20%,
    rgba(75,58,47,.07) 35%,
    rgba(75,58,47,.14) 47%,
    rgba(199,176,138,.25) 50%,
    rgba(75,58,47,.14) 53%,
    rgba(75,58,47,.07) 65%,
    rgba(75,58,47,.03) 80%,
    transparent 100%
  );
  opacity:0;
  animation:ciFoldCreaseIn 0.5s ease 0.3s forwards;
}
@keyframes ciFoldCreaseIn{
  0%{opacity:0}
  100%{opacity:1}
}

/* ===== MASTHEAD ===== */
.ci-mh{
  position:absolute;top:28px;z-index:10;
  display:flex;align-items:center;gap:8px;
  opacity:0;
  animation:ciInkIn 0.5s ease 0.3s forwards;
}
.ci-mh--left{left:36px;right:24px}
.ci-mh--right{right:36px;left:24px;justify-content:flex-end}
.ci-mh-text{
  font-family:'The Seasons','Georgia',serif;
  font-size:clamp(8px,1.1vw,12px);
  color:#C7B08A;
  letter-spacing:3px;
  text-transform:uppercase;
  font-variant:small-caps;
}
.ci-mh-dot{
  color:#C7B08A;
  font-size:10px;
}

/* ===== HORIZONTAL RULES ===== */
.ci-rule-h{
  position:absolute;height:1px;background:#C7B08A;
  z-index:10;opacity:0;
  transform-origin:left center;
}
.ci-panel--left .ci-rule-h{left:36px;right:24px}
.ci-panel--right .ci-rule-h{left:24px;right:36px;transform-origin:right center}
.ci-rule-h--top{
  top:56px;
  animation:ciRuleIn 0.6s ease 0.35s forwards;
}
.ci-rule-h--bottom{
  bottom:56px;
  animation:ciRuleIn 0.6s ease 0.8s forwards;
}

@keyframes ciRuleIn{
  0%{opacity:0;transform:scaleX(0)}
  100%{opacity:.35;transform:scaleX(1)}
}

/* ===== COLUMN SECTIONS ===== */
.ci-col{
  position:absolute;z-index:10;
  opacity:0;
}
.ci-panel--left .ci-col{text-align:right}
.ci-panel--right .ci-col{text-align:left}

.ci-col--tl{top:16%;animation:ciInkIn 0.5s ease 0.5s forwards}
.ci-col--bl{bottom:16%;animation:ciInkIn 0.5s ease 0.8s forwards}
.ci-col--tr{top:16%;animation:ciInkIn 0.5s ease 0.6s forwards}
.ci-col--br{bottom:16%;animation:ciInkIn 0.5s ease 0.9s forwards}

.ci-panel--left .ci-col{left:36px;right:28px}
.ci-panel--right .ci-col{left:28px;right:36px}

.ci-col-head{
  font-family:'Quincy CF','Georgia',serif;
  font-size:clamp(14px,2vw,24px);
  color:#4B3A2F;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.ci-col-rule{
  height:1px;background:#C7B08A;
  margin-bottom:10px;opacity:.4;
}
.ci-panel--left .ci-col-rule{width:45px;margin-left:auto}
.ci-panel--right .ci-col-rule{width:45px;margin-right:auto}

.ci-col-text{
  font-family:'The Seasons','Georgia',serif;
  font-style:italic;
  font-size:clamp(10px,1.2vw,14px);
  color:#4B3A2F;
  opacity:.45;
  line-height:1.7;
  margin:0;
}

/* ===== WATERMARK QUOTATION MARKS ===== */
.ci-wm{
  position:absolute;
  font-family:'Quincy CF','Georgia',serif;
  font-size:clamp(120px,28vw,380px);
  color:#C7B08A;opacity:.05;
  z-index:0;pointer-events:none;line-height:1;
}
.ci-wm--left{top:22%;right:8%}
.ci-wm--right{bottom:12%;left:8%}

/* ===== FOOTER BAR ===== */
.ci-foot{
  position:absolute;bottom:28px;z-index:10;
  font-family:'The Seasons','Georgia',serif;
  font-size:clamp(7px,1vw,11px);
  color:#C7B08A;
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-variant:small-caps;
  opacity:0;
  animation:ciInkIn 0.5s ease 1.0s forwards;
}
.ci-foot--left{left:36px}
.ci-foot--right{right:36px}

/* ===== OVERLAY (centered headline) ===== */
.ci-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  z-index:20;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  pointer-events:none;
  gap:10px;
}
.ci-overlay.ci-overlay-out{
  animation:ciOverlayOut 0.5s ease forwards;
}
@keyframes ciOverlayOut{
  0%{opacity:1}
  100%{opacity:0}
}

/* ===== MAIN HEADLINE ===== */
.ci-main-head{
  font-family:'Quincy CF','Georgia',serif;
  font-size:clamp(36px,7.5vw,110px);
  color:#A18162;
  letter-spacing:clamp(1px,0.4vw,5px);
  white-space:nowrap;
  opacity:0;
  animation:ciHeadIn 0.8s ease 0.4s forwards;
}

/* Ink-bleed effect: blurry → sharp like ink hitting paper */
@keyframes ciHeadIn{
  0%{opacity:0;filter:blur(8px);transform:scale(1.04)}
  60%{opacity:1;filter:blur(2px);transform:scale(1.01)}
  100%{opacity:1;filter:blur(0);transform:scale(1)}
}

.ci-main-rule{
  width:clamp(60px,8vw,130px);
  height:1px;background:#C7B08A;
  opacity:0;
  animation:ciRuleIn 0.4s ease 0.7s forwards;
}

/* ===== TAGLINE ===== */
.ci-tagline{
  font-family:'The Seasons','Georgia',serif;
  font-style:italic;
  font-size:clamp(10px,1.4vw,17px);
  color:#C7B08A;opacity:0;
  letter-spacing:2px;
  animation:ciInkIn 0.5s ease 0.85s forwards;
}

/* Ink-in animation for all content */
@keyframes ciInkIn{
  0%{opacity:0;filter:blur(3px)}
  100%{opacity:1;filter:blur(0)}
}

/* ===== FOLD ANIMATIONS ===== */
@keyframes ciFoldL{
  0%,45%{transform:rotateY(0);opacity:1}
  85%{opacity:1}
  100%{transform:rotateY(-105deg);opacity:0}
}
@keyframes ciFoldR{
  0%,45%{transform:rotateY(0);opacity:1}
  85%{opacity:1}
  100%{transform:rotateY(105deg);opacity:0}
}

/* ===== CLEANUP ===== */
#clairify-intro.done{display:none}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  #clairify-intro,.ci-fold{display:none}
}

/* ===== MOBILE ===== */
@media(max-width:480px){
  #clairify-intro{perspective:1200px}
  .ci-mh--left,.ci-mh--right{left:16px;right:16px}
  .ci-mh-text{font-size:7px;letter-spacing:2px}
  .ci-rule-h,.ci-panel--left .ci-rule-h,.ci-panel--right .ci-rule-h{left:16px;right:16px}
  .ci-panel--left .ci-col,.ci-panel--right .ci-col{left:16px;right:16px}
  .ci-foot--left{left:16px}
  .ci-foot--right{right:16px}
  .ci-main-head{font-size:clamp(24px,9vw,42px)}
  .ci-wm{font-size:clamp(80px,35vw,180px)}
  .ci-col-head{font-size:clamp(11px,3vw,16px)}
  .ci-col-text{font-size:clamp(8px,2.5vw,11px)}
  .ci-fold{width:16px}
  .ci-col--tl,.ci-col--tr{top:14%}
  .ci-col--bl,.ci-col--br{bottom:14%}
}

/* ===== TABLET ===== */
@media(min-width:481px) and (max-width:1024px){
  #clairify-intro{perspective:1400px}
  .ci-main-head{font-size:clamp(30px,6.5vw,64px)}
  .ci-wm{font-size:clamp(120px,25vw,280px)}
  .ci-fold{width:22px}
}

/* ===== LANDSCAPE MOBILE ===== */
@media(max-height:500px) and (orientation:landscape){
  .ci-main-head{font-size:clamp(22px,6vh,50px)}
  .ci-wm{font-size:clamp(60px,20vh,150px)}
  .ci-col-head{font-size:clamp(10px,2.5vh,16px)}
  .ci-col-text{font-size:clamp(8px,1.5vh,12px)}
  .ci-col--tl,.ci-col--tr{top:18%}
  .ci-col--bl,.ci-col--br{bottom:14%}
}