/* John Xuna: a life in pictures. TV slideshow styles.
   Written for old TV browsers too: no CSS variables, no clamp()/min(), prefixed transforms.
   Palette follows xuna.com: paper #f8f4ec, ink #2c2620, terracotta #8a4b1f, Atlantic teal #2f5d62. */

@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/caveat-latin.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-latin.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-latin.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-sans-3-latin.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/source-sans-3-latin.woff2) format("woff2")}

*{box-sizing:border-box;-webkit-box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
body{
  background-color:#1d1915;
  background-image:url(images/slideshow/grain.png),-webkit-radial-gradient(50% 40%,ellipse cover,#3b3129 0%,#26201b 55%,#1a1612 100%);
  background-image:url(images/slideshow/grain.png),radial-gradient(ellipse at 50% 40%,#3b3129 0%,#26201b 55%,#1a1612 100%);
  color:#f5efe3;
  font-family:"Source Sans 3","Source Sans Pro","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
body.nocursor,body.nocursor *{cursor:none !important}
.script{font-family:"Caveat","Segoe Script","Bradley Hand","Brush Script MT",cursive;font-weight:700;line-height:1.1}

/* ---------- Life path canvas ---------- */
.stage{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
.canvas{position:absolute;left:0;top:0;width:3600px;height:2040px;
  -webkit-transform-origin:0 0;transform-origin:0 0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.path-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.path-svg .life-path{fill:none;stroke:rgba(245,239,227,.30);stroke-width:5;stroke-linecap:round;stroke-dasharray:12 14}
.path-svg .life-path-glow{fill:none;stroke:rgba(194,122,69,.10);stroke-width:26;stroke-linecap:round}
.nodes{position:absolute;left:0;top:0;width:100%;height:100%}

.node{position:absolute;width:0;height:0}
.node .dot{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;
  background:#26201b;border:4px solid rgba(245,239,227,.75);
  -webkit-transition:background-color .6s,border-color .6s;transition:background-color .6s,border-color .6s}
.node.active .dot{background:#c27a45;border-color:#f5efe3}
.node.seen .dot{border-color:#c27a45}
.thumb{position:absolute;left:-88px;width:176px;padding:8px 8px 4px;background:#f8f4ec;border-radius:3px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);text-align:center}
.node.up .thumb{bottom:28px;-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}
.node.down .thumb{top:28px;-webkit-transform:rotate(2deg);transform:rotate(2deg)}
.thumb-img{width:160px;height:120px;background-color:#d9cfbd;background-size:cover;background-position:center 30%;background-repeat:no-repeat}
.thumb-year{font-family:"Caveat","Segoe Script","Brush Script MT",cursive;font-weight:700;font-size:34px;line-height:40px;height:40px;color:#8a4b1f;white-space:nowrap;overflow:hidden}
.chapter-label{position:absolute;left:-220px;width:440px;text-align:center;
  font-family:"Caveat","Segoe Script","Brush Script MT",cursive;font-weight:700;font-size:58px;line-height:1;color:#e2b07a;white-space:nowrap}
.node.up .chapter-label{top:34px}
.node.down .chapter-label{bottom:34px}

/* ---------- Dim layer + photo cards ---------- */
.dim{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(20,16,12,.66);opacity:0;
  -webkit-transition:opacity .7s ease;transition:opacity .7s ease;pointer-events:none}
.dim.on{opacity:1}
.frame{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.card-wrap{position:absolute;left:50%;top:50%;opacity:0;
  -webkit-transform:translate(-50%,-50%) scale(.72);transform:translate(-50%,-50%) scale(.72);
  -webkit-transition:opacity .5s ease,-webkit-transform .5s ease;transition:opacity .5s ease,transform .5s ease}
.card-wrap.show{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);
  -webkit-transition:opacity .6s ease,-webkit-transform .8s cubic-bezier(.22,1,.36,1);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.card{background:#f8f4ec;padding:1.6vh 1.6vh 0;border-radius:4px;
  box-shadow:0 2.5vh 7vh rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25)}
.card.tilt-l{-webkit-transform:rotate(-.7deg);transform:rotate(-.7deg)}
.card.tilt-r{-webkit-transform:rotate(.7deg);transform:rotate(.7deg)}
.photo{position:relative;overflow:hidden;margin:0 auto;background:#e9e1d2}
.photo img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  -webkit-transform-origin:50% 40%;transform-origin:50% 40%}
.cap{display:table;width:100%;padding:1.3vh .6vw 1.7vh;color:#2c2620}
.cap-year,.cap-text{display:table-cell;vertical-align:middle}
.cap-year{font-family:"Caveat","Segoe Script","Brush Script MT",cursive;font-weight:700;color:#8a4b1f;
  font-size:4.6vw;line-height:1;white-space:nowrap;padding-right:1.6vw;width:1%}
.cap-year.empty{display:none}
.cap-chapter{font-size:1.15vw;letter-spacing:.14em;text-transform:uppercase;color:#2f5d62;font-weight:700;line-height:1.3}
.cap-line{font-size:2.7vw;font-weight:600;line-height:1.18;color:#2c2620}
.cap-line.long{font-size:2.25vw}
.cap-place{font-size:1.75vw;color:#6e6253;line-height:1.3;margin-top:.2vh}
.cap-place:empty,.cap-chapter:empty{display:none}
body.nocap .cap{display:none}
body.nocap .card{padding-bottom:1.6vh}
body.nocap .chapter-label{display:none}

/* Simple mode (?simple=1): plain crossfade, no camera */
body.simple .stage,body.simple .dim{display:none}
body.simple .card-wrap,body.simple .card-wrap.show{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  -webkit-transition:opacity 1.4s ease;transition:opacity 1.4s ease}

/* ---------- Closing overview label ---------- */
.finale{position:absolute;left:0;right:0;bottom:0;padding:5vh 4vw 4vh;text-align:center;opacity:0;
  background:-webkit-linear-gradient(top,rgba(20,16,12,0) 0%,rgba(20,16,12,.85) 45%);
  background:linear-gradient(to bottom,rgba(20,16,12,0) 0%,rgba(20,16,12,.85) 45%);
  -webkit-transition:opacity 1.2s ease;transition:opacity 1.2s ease;pointer-events:none}
.finale.on{opacity:1}
.finale p{margin:0}
.finale-title{font-size:5vw;color:#f5efe3}
.finale-sub{font-size:2.2vw;letter-spacing:.08em;color:rgba(245,239,227,.85);margin-top:.4vh}
.finale-es{font-size:1.6vw;font-style:italic;color:#e2b07a;margin-top:.8vh}

/* ---------- Opening title scene ---------- */
.opening{position:absolute;top:0;left:0;right:0;bottom:0;z-index:50;text-align:center;
  background-color:#221d18;
  background-image:url(images/slideshow/grain.png),-webkit-radial-gradient(50% 42%,ellipse cover,#4a3d31 0%,#2a231d 60%,#1a1612 100%);
  background-image:url(images/slideshow/grain.png),radial-gradient(ellipse at 50% 42%,#4a3d31 0%,#2a231d 60%,#1a1612 100%);
  -webkit-transition:opacity 1.2s ease,-webkit-transform 1.2s ease,visibility 0s linear 0s;
  transition:opacity 1.2s ease,transform 1.2s ease,visibility 0s linear 0s}
.opening.exit{opacity:0;visibility:hidden;-webkit-transform:scale(1.1);transform:scale(1.1);
  -webkit-transition:opacity .9s ease,-webkit-transform 1s cubic-bezier(.33,1,.32,1),visibility 0s linear 1s;
  transition:opacity .9s ease,transform 1s cubic-bezier(.33,1,.32,1),visibility 0s linear 1s}
.opening-inner{position:absolute;left:8vw;right:8vw;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.o-eyebrow{margin:0 0 1.5vh;font-size:1.55vw;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,239,227,.6)}
.o-title{margin:0 0 2.5vh;font-weight:700;color:#f5efe3}
.o-line{display:block;font-size:11vw;line-height:1.05}
.o-line2{font-size:5.4vw;color:#e2b07a;margin-top:.5vh}
.o-sub{margin:0;font-size:2vw;color:rgba(245,239,227,.78);letter-spacing:.03em}
.o-eyebrow,.o-line,.o-sub{opacity:0}
.opening.play .o-eyebrow{-webkit-animation:fadeUp 1s ease .3s both;animation:fadeUp 1s ease .3s both}
.opening.play .o-line{-webkit-animation:titleIn 1.2s cubic-bezier(.22,1,.36,1) .7s both;animation:titleIn 1.2s cubic-bezier(.22,1,.36,1) .7s both}
.opening.play .o-line2{-webkit-animation-delay:1.3s;animation-delay:1.3s}
.opening.play .o-sub{-webkit-animation:fadeUp 1s ease 2.1s both;animation:fadeUp 1s ease 2.1s both}
@-webkit-keyframes titleIn{from{opacity:0;-webkit-transform:translateY(3vh) scale(.96)}to{opacity:1;-webkit-transform:translateY(0) scale(1)}}
@keyframes titleIn{from{opacity:0;transform:translateY(3vh) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@-webkit-keyframes fadeUp{from{opacity:0;-webkit-transform:translateY(2vh)}to{opacity:1;-webkit-transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(2vh)}to{opacity:1;transform:translateY(0)}}

/* ---------- Corner mark, hint, paused ---------- */
.mark{position:absolute;z-index:60;top:2.4vh;right:2vw;font-size:1.2vw;letter-spacing:.06em;color:rgba(245,239,227,.55);pointer-events:none}
.hint,.paused{position:absolute;z-index:60;top:2.4vh;left:2vw;font-size:1.15vw;color:rgba(245,239,227,.7);
  background:rgba(0,0,0,.35);border-radius:2em;padding:.5vh 1.1vw;opacity:0;pointer-events:none;
  -webkit-transition:opacity .8s ease;transition:opacity .8s ease}
.hint.on,.paused.on{opacity:1}
.paused{font-size:1.5vw;color:#f5efe3;background:rgba(138,75,31,.85)}
/* ---------- Sound prompt (TVs need one button press before they allow sound) ---------- */
.sound-prompt{display:none;margin:4.5vh auto 0;font-size:2.3vw;line-height:1.3;color:#f5efe3;
  background:rgba(138,75,31,.9);border:.25vw solid rgba(245,239,227,.65);border-radius:3em;padding:1.4vh 2.6vw;
  box-shadow:0 1vh 3vh rgba(0,0,0,.4);-webkit-animation:spPulse 2.4s ease-in-out 2.6s infinite both;animation:spPulse 2.4s ease-in-out 2.6s infinite both}
.sound-prompt b{font-weight:700;letter-spacing:.04em;border:.15vw solid rgba(245,239,227,.8);border-radius:.4em;padding:0 .5vw}
.sp-icon{font-size:2.6vw;margin-right:.4vw}
body.sound-off .sound-prompt{display:inline-block}
@-webkit-keyframes spPulse{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes spPulse{0%,100%{opacity:.75}50%{opacity:1}}
.sound-badge,.mute-badge{position:absolute;z-index:60;top:6.2vh;right:2vw;font-size:1.1vw;color:rgba(245,239,227,.8);
  background:rgba(0,0,0,.35);border-radius:2em;padding:.5vh 1vw;opacity:0;pointer-events:none;
  -webkit-transition:opacity .8s ease;transition:opacity .8s ease}
body.sound-off .sound-badge{opacity:.55}
.mute-badge.on{opacity:.8}
.finale-credits{font-size:.95vw;color:rgba(245,239,227,.5);margin-top:1.2vh !important;display:none}
body.sound-on .finale-credits,body.sound-off .finale-credits{display:block}
.noscript{position:absolute;z-index:99;top:40%;left:10%;right:10%;text-align:center;font-size:24px}
.noscript a{color:#e2b07a}

@media (prefers-reduced-motion:reduce){
  .card-wrap,.card-wrap.show{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
}