/* Cloud Factory Pizza Matchmaker
   Custom Cloud Factory design system. Variance 7, motion 5, density 4. */
.matchmaker-page{background:var(--paper)}
.match-hero{position:relative;min-height:calc(100dvh - 114px);display:flex;align-items:center;overflow:hidden;padding:4.5rem 0 5rem;background:radial-gradient(circle at 82% 14%,rgba(207,232,243,.95),rgba(207,232,243,0) 36%),linear-gradient(180deg,var(--paper),var(--cream))}
.match-hero::before{content:"";position:absolute;inset:0;background:var(--tileimg) repeat;background-size:132px 132px;opacity:.055;pointer-events:none}
.match-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);align-items:center;gap:2rem;width:100%}
.match-intro{position:relative;z-index:2;max-width:590px;padding-left:clamp(0px,3vw,42px)}
.match-kicker{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);margin-bottom:1rem}
.match-intro h1{font-size:clamp(3rem,6vw,5.7rem);max-width:8ch;margin-bottom:1rem}
.match-intro p{max-width:29rem;font-size:1.16rem;line-height:1.6;color:var(--slate);margin-bottom:1.8rem}
.match-start{min-width:176px}
.match-hero-art{position:relative;min-height:560px;display:grid;place-items:center;isolation:isolate}
.match-sun{position:absolute;width:min(38vw,500px);aspect-ratio:1;border-radius:50%;background:var(--lemon);border:4px solid var(--ink);box-shadow:18px 20px 0 var(--terra)}
.match-hero-pizza{position:relative;width:min(45vw,610px);max-height:610px;object-fit:contain;filter:drop-shadow(0 36px 35px rgba(14,37,48,.36));transform:rotate(8deg);z-index:2}
.match-mascot{position:absolute;width:150px;right:1%;bottom:2%;z-index:3;filter:drop-shadow(0 18px 18px rgba(14,37,48,.25));transform:rotate(5deg)}

.match-quiz{min-height:calc(100dvh - 114px);padding:4rem 0 6rem;background:linear-gradient(145deg,var(--paper),var(--cream));display:flex;align-items:center}
.match-quiz[hidden],.match-results[hidden],.match-hero[hidden]{display:none}
.match-shell{width:100%;max-width:1040px}
.match-progress{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin-bottom:1.5rem}
.match-question-wrap{position:relative;background:rgba(253,250,240,.94);border:2px solid var(--ink);border-radius:28px;padding:clamp(1.5rem,5vw,4.5rem);box-shadow:18px 20px 0 var(--sky)}
.match-prompt{font-family:'JetBrains Mono',monospace;font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);font-weight:700;margin-bottom:.7rem}
.match-question-wrap h2{font-size:clamp(2rem,4.6vw,3.8rem);max-width:15ch;margin-bottom:.65rem}
.match-help{color:var(--slate-2);max-width:44rem;margin-bottom:2rem}
.match-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.match-option{min-height:76px;text-align:left;display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;border:2px solid var(--line);border-radius:16px;background:var(--shell);color:var(--ink);font:700 1rem/1.25 'Karla',sans-serif;cursor:pointer;transition:border-color .22s,background .22s,transform .22s var(--ease-out),box-shadow .22s}
.match-option:hover{border-color:var(--terra);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.match-option:focus-visible,.match-back:focus-visible{outline:3px solid var(--lemon);outline-offset:3px}
.match-option.is-selected{background:var(--ink);border-color:var(--ink);color:#fff}
.match-option-icon{font-size:1.55rem;line-height:1;flex:0 0 34px;text-align:center}
.match-option-text{display:grid;gap:.18rem}
.match-option small{font-weight:500;color:var(--slate-2);font-size:.84rem}
.match-option.is-selected small{color:rgba(255,255,255,.72)}
.match-controls{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem}
.match-back{border:0;background:none;color:var(--ink);font:700 .96rem 'Karla',sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:.65rem 0}
.match-back[hidden]{visibility:hidden;display:block}

.match-results{padding:5rem 0 7rem;background:linear-gradient(180deg,var(--cream),var(--paper))}
.result-lead{max-width:720px;margin-bottom:2.2rem}
.result-lead .match-kicker{margin-bottom:.7rem}
.result-lead h2{font-size:clamp(2.45rem,5vw,4.5rem);margin-bottom:.7rem}
.result-lead p{font-size:1.1rem;color:var(--slate)}
.best-match{position:relative;display:grid;grid-template-columns:minmax(330px,.86fr) minmax(0,1.14fr);gap:clamp(2rem,5vw,5rem);align-items:center;background:var(--ink);border-radius:28px;padding:clamp(1.6rem,4vw,3.8rem);overflow:hidden;color:#fff;box-shadow:var(--shadow)}
.best-match::before{content:"";position:absolute;inset:0;background:var(--tileimg) repeat;background-size:124px 124px;opacity:.08;pointer-events:none}
.best-match-media,.best-match-copy{position:relative;z-index:1}
.best-match-media{display:grid;place-items:center;min-height:360px}
.best-match-media::before{content:"";position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:var(--lemon)}
.best-match-media img{position:relative;width:min(100%,460px);height:min(36vw,460px);aspect-ratio:1;object-fit:cover;filter:drop-shadow(0 24px 28px rgba(0,0,0,.38));transform:rotate(-6deg);z-index:1}
.best-match-media img.is-transparent{object-fit:contain}
.pizza-image-stack{position:relative;display:grid;place-items:center;width:100%;height:100%}
.pizza-image-stack img{grid-area:1/1;transition:opacity .35s var(--ease-out)}
.pizza-image-stack .pizza-primary{opacity:1}
.pizza-image-stack .pizza-alt{opacity:0}
.best-match-media:hover .pizza-image-stack .pizza-primary,.pizza-result:hover .pizza-image-stack .pizza-primary{opacity:0}
.best-match-media:hover .pizza-image-stack .pizza-alt,.pizza-result:hover .pizza-image-stack .pizza-alt{opacity:1}
.best-match-copy .result-label{font-family:'JetBrains Mono',monospace;color:var(--lemon);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.7rem}
.best-match h3{font-size:clamp(2.45rem,5vw,4.4rem);color:#fff;margin-bottom:.85rem}
.best-match .pizza-desc{font-size:1.1rem;line-height:1.65;color:rgba(255,255,255,.82);max-width:36rem}
.reason-list{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.4rem 0 1.8rem}
.reason{display:inline-flex;align-items:center;padding:.45rem .8rem;border:1px solid rgba(255,255,255,.3);border-radius:100px;color:#fff;font-size:.82rem;font-weight:700}
.best-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.best-actions .btn-out{border-color:rgba(255,255,255,.78);color:#fff}
.best-actions .btn-out:hover{background:#fff;color:var(--ink)}
.result-note{font-size:.78rem;line-height:1.45;color:rgba(255,255,255,.7);margin-top:1.25rem;max-width:38rem}
.alternatives{margin-top:5rem}
.alternatives-head{max-width:720px;margin-bottom:2rem}
.alternatives-head h3{font-size:clamp(2rem,4vw,3.3rem);margin-bottom:.55rem}
.alternatives-head p{color:var(--slate)}
.pizza-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.pizza-result{display:grid;grid-template-columns:148px 1fr;gap:1.25rem;align-items:center;background:var(--shell);border:1px solid var(--line);border-radius:20px;padding:1rem;min-height:184px;box-shadow:var(--shadow-card);transition:transform .25s var(--ease-out),border-color .25s}
.pizza-result:hover{transform:translateY(-4px);border-color:var(--terra)}
.pizza-result-media{display:grid;place-items:center;border-radius:14px;background:var(--sky);aspect-ratio:1;overflow:hidden}
.pizza-result-media img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(14,37,48,.25))}
.pizza-result h4{font-size:1.35rem;margin-bottom:.25rem}
.pizza-result p{font-size:.88rem;line-height:1.45;color:var(--slate-2)}
.pizza-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.pizza-tag{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--terra)}
.results-footer{display:flex;justify-content:center;margin-top:3.5rem}
.no-match{max-width:720px;margin:3rem auto;padding:3rem;background:var(--shell);border:2px solid var(--ink);border-radius:24px;text-align:center;box-shadow:14px 16px 0 var(--sky)}
.no-match h2{font-size:2.6rem;margin-bottom:.7rem}
.no-match p{margin-bottom:1.5rem}
.match-confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:9999}
.match-confetti-piece{position:absolute;top:-24px;display:block;border-radius:2px;opacity:0;will-change:transform,opacity;animation:matchConfettiFall var(--duration) cubic-bezier(.18,.68,.28,1) var(--delay) forwards}
.match-confetti-piece.is-round{border-radius:50%}

@media(max-width:1080px){
  .match-hero-grid{grid-template-columns:minmax(0,1fr) minmax(390px,.9fr)}
  .match-hero-art{min-height:490px}
  .match-mascot{width:120px}
  .pizza-result{grid-template-columns:120px 1fr}
}
@media(max-width:820px){
  .match-hero{padding:3rem 0 4rem;min-height:auto}
  .match-hero-grid{grid-template-columns:1fr;gap:1rem}
  .match-intro{padding-left:0;text-align:left}
  .match-intro h1{max-width:9ch}
  .match-hero-art{min-height:330px}
  .match-sun{width:min(72vw,380px);box-shadow:12px 14px 0 var(--terra)}
  .match-hero-pizza{width:min(74vw,390px);max-height:340px}
  .match-mascot{right:2%;bottom:0;width:105px}
  .match-quiz{padding:3rem 0 5rem;min-height:auto}
  .best-match{grid-template-columns:1fr;gap:1.2rem}
  .best-match-media{min-height:300px}
  .best-match-media img{width:min(88%,390px);height:min(76vw,390px)}
  .pizza-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .match-hero{padding:2.4rem 0 3.6rem}
  .match-hero-art{min-height:285px}
  .match-hero-pizza{width:min(72vw,300px);max-height:285px}
  .match-intro h1{font-size:2.9rem}
  .match-intro p{font-size:1.02rem}
  .match-question-wrap{padding:1.35rem;border-radius:20px;box-shadow:8px 10px 0 var(--sky)}
  .match-question-wrap h2{font-size:2rem}
  .match-options{grid-template-columns:1fr;gap:.65rem}
  .match-option{min-height:66px;padding:.85rem .95rem}
  .match-results{padding:3.5rem 0 5rem}
  .best-match{border-radius:20px;padding:1.25rem}
  .best-match-media{min-height:250px}
  .best-match-media img{width:min(92%,340px);height:min(82vw,340px)}
  .best-match h3{font-size:2.6rem}
  .best-actions{display:grid}
  .best-actions .btn{width:100%}
  .pizza-result{grid-template-columns:92px 1fr;gap:.85rem;min-height:140px;padding:.8rem}
  .pizza-result h4{font-size:1.12rem}
  .pizza-result p{font-size:.81rem}
}
@media(prefers-reduced-motion:no-preference){
  .match-hero-pizza{animation:matchFloat 5.8s ease-in-out infinite}
  .match-mascot{animation:matchMascot 4.6s ease-in-out infinite}
  .match-question-wrap{animation:matchIn .42s var(--ease-out) both}
  .best-match{animation:matchIn .5s var(--ease-out) both}
}
@keyframes matchFloat{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(11deg) translateY(-12px)}}
@keyframes matchMascot{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(1deg) translateY(-8px)}}
@keyframes matchIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes matchConfettiFall{0%{opacity:0;transform:translate3d(0,-5vh,0) rotate(0)}8%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),108vh,0) rotate(var(--spin))}}
@media(prefers-reduced-motion:reduce){
  .match-option,.pizza-result,.btn{transition:none!important}
  .pizza-image-stack img{transition:none!important}
  .match-hero-pizza,.match-mascot,.match-question-wrap,.best-match{animation:none!important}
  .match-confetti{display:none!important}
}