/* What happens after a subscribe is confirmed: the cracks, the break, the hype and the confirmation.
   adamgtm.com/hair and the homepage both carry this file, on top of shared/style.css. hair.css lays
   out only the /hair landing. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.hr{overflow-x:hidden}
body.hr.in-deep{overflow:hidden;background:var(--ink)}
.crust{position:relative}

/* a bad email: the form shakes its head */
.nope{animation:hr-nope .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes hr-nope{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.hr-msg.err{color:var(--red-ink);margin-top:6px}
.hp-modal-msg.err{color:var(--red-ink)}

/* shared by the tracker door's chart and the hype's Skip button */
.sp{display:block;width:100%;height:36px;overflow:visible}
.sp polyline{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cap-in{from{opacity:0;transform:translateY(10px)}}

/* ---- the cracks ---- */
.cracks{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:hidden}
.cracks path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cracks .ck-hi{stroke:#fff;stroke-width:1.4;opacity:.9}
.cracks .ck{stroke:var(--ink);stroke-width:1.7}
.cracks .ck-br{stroke-width:1.1}
.cracks .ck-au{stroke:var(--gold);stroke-width:.8;opacity:var(--glow,0);transition:opacity .4s}
.cracks.calm .ck{stroke:rgba(20,19,15,.42);stroke-width:1.1}
.cracks.calm .ck-hi{opacity:.45}
.cracks.calm .ck-au{opacity:0}

/* ---- the break ---- */
.shard{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:60;overflow:hidden}
.shard > .crust{position:absolute;margin:0;background:var(--paper)}
.shard *{animation:none!important;transition:none!important}
.deep{position:fixed;inset:0;z-index:40;overflow:hidden;color:#f4f0e8;
  background:radial-gradient(120% 90% at 50% 46%,#24211b 0%,#151410 55%,#0d0c0a 100%)}
.deep::before{content:"";position:absolute;inset:0;opacity:.25;
  background-image:linear-gradient(#211e19 1px,transparent 1px),linear-gradient(90deg,#211e19 1px,transparent 1px);background-size:36px 36px}
.hy-seis{position:absolute;left:0;top:76%;width:100%;height:200px;margin-top:-100px;opacity:.9;transition:top .5s cubic-bezier(.6,0,.2,1)}
.deep.finale .hy-seis{top:50%}
.hy-flags{transition:opacity .25s}
.deep.finale .hy-flags{opacity:0}
.hy-flag{position:absolute;left:0;top:76%;margin:0;display:flex;align-items:center;gap:10px;max-width:min(76vw,640px);padding:9px 14px 9px 9px;
  background:#f4f0e8;color:var(--ink);border:1px solid #000;box-shadow:0 10px 26px rgba(0,0,0,.5);opacity:0;z-index:3;white-space:nowrap}
.hy-flag img{width:30px;height:30px;object-fit:contain;background:#fff;flex:none}
.hy-flag em{font:600 11.5px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.hy-flag span{font:600 17px Inter,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis}
.hy-flag::after{content:"";position:absolute;right:17px;top:100%;width:1px;height:var(--stem,60px);background:#f4f0e8}
.hy-you{top:50%;padding:12px 18px 12px 12px;gap:12px;border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,154,71,.35),0 18px 40px rgba(0,0,0,.6)}
.hy-you img{width:40px;height:40px}
.hy-you span{font:600 21px/1.25 Inter,system-ui,sans-serif;white-space:normal;max-width:min(64vw,520px)}
.hy-you em{font-size:14px}
.hy-you{padding:14px 22px 14px 18px}
.hy-you::after{background:var(--gold);width:2px}
/* what subscribing opens, counted, as the page falls away */
.hy-count{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:4;display:flex;gap:44px;width:max-content;max-width:94vw}
.hy-count p{margin:0;text-align:center;opacity:0}
.hy-count b{display:block;font:400 clamp(44px,6.4vw,92px)/1 "Instrument Serif",Georgia,serif;color:#f4f0e8;-webkit-text-stroke:.6px #f4f0e8;
  font-variant-numeric:tabular-nums}
.hy-count span{display:block;margin-top:8px;font:500 clamp(10px,1.05vw,13px) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.hy-beat{position:absolute;left:50%;top:40%;margin:0;width:min(92vw,1100px);transform:translate(-50%,-50%);text-align:center;opacity:0;z-index:3}
.hy-beat b{display:block;font:400 clamp(54px,10.5vw,148px)/.92 "Instrument Serif",Georgia,serif;-webkit-text-stroke:1px #f4f0e8;letter-spacing:-.015em;
  text-shadow:0 6px 40px rgba(0,0,0,.6)}
.hy-beat span{display:inline-block;margin-top:18px;font:500 clamp(12px,1.35vw,16px) var(--mono);letter-spacing:.08em;color:var(--gold);
  background:rgba(13,12,10,.72);padding:6px 10px}
.hy-cv{position:absolute;left:50%;top:50%;width:clamp(120px,17vw,250px);height:auto;background:#fff;border:4px solid #fff;
  box-shadow:0 24px 60px rgba(0,0,0,.6);opacity:0;z-index:2}
.hy-skip{position:absolute;right:22px;bottom:22px;z-index:5;opacity:0;animation:cap-in .4s ease-out .5s forwards;border:1px solid #4a463d;background:rgba(13,12,10,.6);color:#f4f0e8;
  font:500 13px var(--mono);padding:10px 14px;cursor:pointer}
.hy-skip:hover{border-color:var(--gold);color:var(--gold)}
.hy-skip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.deep.out{clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.25,1)}
.flash{position:fixed;inset:0;z-index:70;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#fff7e8 0%,rgba(232,154,71,.55) 22%,rgba(250,248,243,0) 60%)}

/* ---- confirmed ---- */
.done{background:var(--paper);color:var(--ink);padding:96px 32px 112px;min-height:100vh}
.done-in{max-width:1120px;margin:0 auto}
.done-h{font:400 clamp(56px,8vw,104px)/.95 "Instrument Serif",Georgia,serif;-webkit-text-stroke:.6px var(--ink);margin:0 0 22px;letter-spacing:-.012em;outline:none}
.done-p{font:500 21px/1.5 Inter,system-ui,sans-serif;color:var(--ink);margin:0;max-width:36em}
.done-next{font:500 14px var(--mono);letter-spacing:.02em;color:var(--gold-ink);margin:14px 0 0}
.done-gmail{display:flex;align-items:center;gap:20px;max-width:780px;margin:26px 0 0;padding:16px 18px;border:1px solid var(--line);background:var(--card)}
.done-gmail[hidden]{display:none}
.done-gmail p{margin:0;font:400 14.5px/1.5 Inter,system-ui,sans-serif;color:var(--soft)}
.done-gbtn{flex:none;background:var(--ink);color:var(--gold);font:600 14px var(--mono);padding:12px 16px;text-decoration:none}
.done-gbtn:hover{color:#fff;text-decoration:none}
.done-gbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.done-q{font:400 34px/1.1 "Instrument Serif",Georgia,serif;margin:60px 0 22px;color:var(--ink)}
.nx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nx{display:flex;flex-direction:column;background:var(--card);color:var(--ink);border:1px solid var(--ink);text-decoration:none;
  box-shadow:6px 6px 0 #e3ddd0;transition:transform .15s,box-shadow .15s}
.nx:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.nx:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.nx-vis{display:block;height:190px;overflow:hidden;border-bottom:1px solid var(--ink);background:#fff}
.nx-vis img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.nx-vis--trend{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 24px;background:#1c1a16}
.nx-vis--trend .sp{height:96px}
.hr-motion .done.is-in .nx-vis--trend .sp{animation:reveal 1.3s cubic-bezier(.5,0,.3,1) 1.1s both}
.nx-vis--trend .sp polyline{stroke-width:3}
.nx-vis--trend b{font:600 22px var(--mono);color:var(--gold)}
.nx-vis--empty{background:#1c1a16}
.nx-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px;flex:1}
.nx-t{font:600 19px/1.25 Inter,system-ui,sans-serif}
.nx-t i{font-style:normal;font-family:var(--mono);margin-left:6px;display:inline-block;transition:transform .15s}
.nx:hover .nx-t i{transform:translateX(4px)}
.nx-why{font:400 14.5px/1.5 Inter,system-ui,sans-serif;color:var(--soft)}
.hr-motion .done.is-in .done-h{animation:done-in .7s cubic-bezier(.2,.8,.3,1) both}
.hr-motion .done.is-in .done-p{animation:done-in .7s cubic-bezier(.2,.8,.3,1) .12s both}
.hr-motion .done.is-in .done-next,.hr-motion .done.is-in .done-gmail{animation:done-in .7s cubic-bezier(.2,.8,.3,1) .2s both}
.hr-motion .done.is-in .done-q{animation:done-in .7s cubic-bezier(.2,.8,.3,1) .3s both}
.hr-motion .done.is-in .nx{animation:nx-in .7s cubic-bezier(.2,.8,.3,1.15) both;animation-delay:calc(var(--i) * .12s + .42s)}
@keyframes done-in{from{opacity:0;transform:translateY(24px)}}
@keyframes nx-in{from{opacity:0;transform:translateY(60px) rotate(1.5deg)}}

/* ---- tablet and phone ---- */
@media (max-width:960px){
  .nx-grid{grid-template-columns:1fr;max-width:620px}
  .nx{flex-direction:row}
  .nx-vis{width:38%;height:auto;min-height:170px;border-bottom:0;border-right:1px solid var(--ink)}
}
@media (max-width:640px){
  .done{padding:64px 16px 88px}
  .done-p{font-size:17px}
  .done-q{font-size:28px;margin-top:44px}
  .done-gmail{flex-direction:column;align-items:flex-start;gap:12px}
  .nx{flex-direction:column}
  .nx-vis{width:auto;min-height:0;height:150px;border-right:0;border-bottom:1px solid var(--ink)}
  .hy-skip{right:14px;bottom:14px}
  .hy-seis{top:84%}
  .hy-flag{max-width:calc(100vw - 40px)}
  .hy-flag span{font-size:13px}
  .hy-you span{font-size:15px}
  .hy-count{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;width:92vw}
  .hy-count b{font-size:44px}
}