/* ============================================================
   Bella, So Fancy — PAGE SECTIONS 2 (build-out pages)
   New components for About / Photos / Videos / Resume / Contact.
   Reuses existing tokens & motion classes. Motion-safe.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.crumb{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:var(--muted);font-weight:500;margin-bottom:1.1rem}
.crumb a{color:var(--muted);transition:color .25s}
.crumb a:hover{color:var(--coral-deep)}
.crumb svg{width:14px;height:14px;color:var(--coral)}
.crumb .here{color:var(--coral-deep);font-weight:600}

/* ---------- Page-head parallax planes ---------- */
.page-head .puff{will-change:transform}
.page-head__sparkle{position:absolute;color:var(--gold);pointer-events:none}
.page-head__sparkle svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 6px rgba(212,175,106,.5))}

/* ---------- Now booking badge ---------- */
.booking-badge{display:inline-flex;align-items:center;gap:.55em;background:#fff;border:1px solid var(--coral-soft);box-shadow:var(--shadow-sm);border-radius:999px;padding:.45em 1em;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:1.3rem}
.booking-badge .pip{width:9px;height:9px;border-radius:50%;background:#3FA66A;position:relative}
.booking-badge .pip::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #3FA66A;opacity:.5}
@media (prefers-reduced-motion:no-preference){
  body:not(.anim-off) .booking-badge .pip::after{animation:pip 2s ease-out infinite}
}
@keyframes pip{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}

/* ---------- Personality badges (floating) ---------- */
.persona{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.persona__badge{display:inline-flex;align-items:center;gap:.7em;background:#fff;border:1px solid var(--coral-soft);border-radius:999px;padding:.8em 1.5em;box-shadow:var(--shadow-sm);font-family:var(--font-display);font-weight:600;font-size:1.15rem}
.persona__badge .pic{width:34px;height:34px;border-radius:50%;background:var(--coral-soft);color:var(--coral-deep);display:grid;place-items:center}
.persona__badge .pic svg{width:18px;height:18px}
.persona__badge:nth-child(2){color:var(--coral-deep)}
.persona__badge:nth-child(3) .pic{background:rgba(212,175,106,.22);color:var(--gold-deep)}
@media (prefers-reduced-motion:no-preference){
  body:not(.anim-off) .persona__badge{animation:floaty 5.5s ease-in-out infinite}
  body:not(.anim-off) .persona__badge:nth-child(2){animation-duration:6.4s;animation-delay:.5s}
  body:not(.anim-off) .persona__badge:nth-child(3){animation-duration:5.8s;animation-delay:.9s}
  body:not(.anim-off) .persona__badge:nth-child(4){animation-duration:6.8s;animation-delay:.3s}
}

/* ---------- Pull quote (script) ---------- */
.pullquote{position:relative;text-align:center;max-width:760px;margin:0 auto;padding:1rem}
.pullquote p{font-family:var(--font-script);font-weight:700;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.3;color:var(--coral-deep)}
.pullquote .by{font-family:var(--font-body);font-size:.95rem;color:var(--muted);margin-top:1rem;font-weight:500}
.pullquote::before,.pullquote::after{font-family:var(--font-display);color:var(--coral-soft);font-size:3rem;line-height:0;position:relative;top:.4em}
.pullquote::before{content:"“"}.pullquote::after{content:"”"}

/* ---------- Piano / music spotlight ---------- */
.music-spot{position:relative;background:linear-gradient(150deg,var(--blush),var(--coral-soft));border-radius:var(--radius-lg);overflow:hidden;padding:clamp(2rem,4vw,3.4rem)}
.music-spot__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;position:relative;z-index:2}
@media (max-width:820px){.music-spot__grid{grid-template-columns:1fr}}
.music-notes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.music-notes span{position:absolute;color:var(--coral-deep);opacity:.5;font-size:1.8rem}
@media (prefers-reduced-motion:no-preference){
  body:not(.anim-off) .music-notes span{animation:noteFloat linear infinite}
}
@keyframes noteFloat{0%{transform:translateY(20px) rotate(-8deg);opacity:0}15%{opacity:.55}100%{transform:translateY(-180px) rotate(12deg);opacity:0}}
.music-player{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.music-player .play-btn{width:80px;height:80px}

/* ---------- Fun facts flip row ---------- */
.facts-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
@media (max-width:980px){.facts-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.facts-grid{grid-template-columns:repeat(2,1fr)}}
.fact{perspective:1000px;height:170px}
.fact__in{position:relative;width:100%;height:100%;transition:transform .7s var(--ease);transform-style:preserve-3d}
.fact:hover .fact__in,.fact.flipped .fact__in{transform:rotateY(180deg)}
.fact__f{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.1rem;box-shadow:var(--shadow-sm)}
.fact__front{background:#fff;border:1px solid var(--coral-soft)}
.fact__front .n{font-family:var(--font-display);font-size:2.2rem;color:var(--coral-deep);line-height:1}
.fact__front .t{font-size:.82rem;color:var(--muted);font-weight:500;margin-top:.4rem}
.fact__back{background:linear-gradient(150deg,var(--coral-deep),var(--coral));color:#fff;transform:rotateY(180deg)}
.fact__back p{font-size:.92rem;line-height:1.4}
body.anim-off .fact:hover .fact__in{transform:none}
body.anim-off .fact.flipped .fact__in{transform:rotateY(180deg)}

/* ---------- Featured shoot (photos) ---------- */
.shoot{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:1rem;min-height:480px}
@media (max-width:820px){.shoot{grid-template-columns:1fr 1fr;grid-template-rows:auto}}
.shoot__main{grid-row:span 2;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);position:relative}
@media (max-width:820px){.shoot__main{grid-column:span 2}}
.shoot__cell{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);position:relative}
.shoot .photo-ph{height:100%}
.shoot__main .photo-ph,.shoot__cell .photo-ph{transition:transform .8s var(--ease)}
.shoot__main:hover .photo-ph,.shoot__cell:hover .photo-ph{transform:scale(1.05)}

/* ---------- Skeleton shimmer ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--blush-2)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
@media (prefers-reduced-motion:no-preference){.skeleton::after{animation:shimmer 1.4s infinite}}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- Privacy / request card ---------- */
.privacy-card{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;background:#fff;border-radius:var(--radius-lg);padding:clamp(1.8rem,3.5vw,2.6rem);box-shadow:var(--shadow);border:1px solid rgba(244,168,142,.2);position:relative;overflow:hidden}
.privacy-card::after{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--blush),transparent 70%)}
.privacy-card__lock{width:64px;height:64px;border-radius:18px;background:linear-gradient(150deg,var(--coral-soft),var(--blush));color:var(--coral-deep);display:grid;place-items:center;flex:none;position:relative;z-index:1}
.privacy-card__lock svg{width:30px;height:30px}
.privacy-card h3{font-size:1.5rem;position:relative;z-index:1}
.privacy-card p{color:var(--muted);margin-top:.4rem;max-width:54ch;position:relative;z-index:1}
.privacy-card .btn{position:relative;z-index:1}
@media (max-width:760px){.privacy-card{grid-template-columns:1fr;text-align:center}.privacy-card__lock{margin-inline:auto}}

/* ---------- Load more ---------- */
.load-more{display:flex;justify-content:center;margin-top:2.6rem}

/* ---------- Video category tabs ---------- */
.vtabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.4rem}
.vtab{border:1.5px solid var(--coral-soft);background:#fff;border-radius:999px;padding:.6em 1.3em;font-weight:500;font-size:.94rem;color:var(--ink);cursor:pointer;transition:all .25s}
.vtab:hover{border-color:var(--coral)}
.vtab.active{background:var(--coral-deep);border-color:var(--coral-deep);color:#fff}

/* ---------- Subscribe band big ---------- */
.sub-band{position:relative;border-radius:var(--radius-lg);overflow:hidden;text-align:center;padding:clamp(2.6rem,5vw,4rem)}
.sub-band__bg{position:absolute;inset:0;z-index:0;background:linear-gradient(120deg,var(--coral-deep),var(--coral),var(--gold),var(--coral-deep));background-size:300% 300%}
@media (prefers-reduced-motion:no-preference){body:not(.anim-off) .sub-band__bg{animation:gradShift 14s ease infinite}}
.sub-band__inner{position:relative;z-index:1}
.sub-band h2{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem)}
.sub-band .subcount{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,4rem);color:#fff;line-height:1;margin:.6rem 0 .2rem}
.sub-band .sublabel{color:rgba(255,255,255,.9);font-size:.95rem;letter-spacing:.05em}

/* ---------- BTS strip ---------- */
.bts-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:680px){.bts-strip{grid-template-columns:1fr}}
.bts-tile{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.bts-tile .photo-ph{transition:transform .6s var(--ease)}
.bts-tile:hover .photo-ph{transform:scale(1.06)}

/* ---------- Resume: training table ---------- */
.rtable{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.rtable th{text-align:left;font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:1rem 1.3rem;background:var(--blush-2);border-bottom:1px solid var(--coral-soft)}
.rtable td{padding:1rem 1.3rem;border-bottom:1px dashed rgba(244,168,142,.45);font-size:.96rem;vertical-align:top}
.rtable tr:last-child td{border-bottom:none}
.rtable tbody tr{transition:background .3s}
.rtable tbody tr:hover{background:linear-gradient(90deg,rgba(252,228,220,.5),transparent 85%)}
.rtable td strong{font-family:var(--font-display);font-weight:600;font-size:1.04rem}
.rtable .role{color:var(--coral-deep);font-weight:600}
.rtable .yr{color:var(--gold-deep);font-weight:600;white-space:nowrap}
.rrow{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rrow.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rrow{opacity:1;transform:none}}
@media (max-width:620px){
  .rtable thead{display:none}
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable tr{padding:.6rem 0;border-bottom:1px solid var(--coral-soft)}
  .rtable td{padding:.3rem 1.2rem;border:none}
}

/* ---------- Award badges with shine ---------- */
.awards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:760px){.awards{grid-template-columns:1fr}}
.award{position:relative;background:#fff;border:1px solid var(--coral-soft);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);overflow:hidden}
.award__ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(150deg,var(--coral-soft),var(--blush));color:var(--gold-deep);display:grid;place-items:center;margin-bottom:1rem}
.award__ic svg{width:26px;height:26px}
.award h4{font-family:var(--font-display);font-size:1.18rem}
.award p{color:var(--muted);font-size:.9rem;margin-top:.3rem}
.award::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg)}
@media (prefers-reduced-motion:no-preference){body:not(.anim-off) .award:hover::before{animation:shine .9s var(--ease)}}
@keyframes shine{to{left:130%}}

/* ---------- Social tiles (contact) ---------- */
.social-tiles{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:560px){.social-tiles{grid-template-columns:1fr}}
.social-tile{position:relative;display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--coral-soft);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-sm);overflow:hidden}
.social-tile .st-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none}
.social-tile .st-ic svg{width:26px;height:26px}
.social-tile.yt .st-ic{background:#E23E32}
.social-tile.ig .st-ic{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.social-tile strong{font-family:var(--font-display);font-size:1.12rem;display:block}
.social-tile .handle{color:var(--muted);font-size:.88rem}
.social-tile .cnt{margin-left:auto;text-align:right;flex:none}
.social-tile .cnt b{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);display:block;line-height:1}
.social-tile .cnt span{font-size:.74rem;color:var(--muted);letter-spacing:.04em}

/* ---------- Floating label fields ---------- */
.fl{position:relative;margin-bottom:1.5rem}
.fl input,.fl textarea,.fl select{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--coral-soft);border-radius:var(--radius-sm);padding:1.35em 1.05em .55em;transition:border-color .25s,box-shadow .25s}
.fl textarea{min-height:130px;resize:vertical}
.fl select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E07856' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.05em center;background-size:18px;padding-right:2.6em}
.fl label{position:absolute;left:1.1em;top:1.05em;color:var(--muted);font-size:1rem;pointer-events:none;transition:all .2s var(--ease);background:transparent}
.fl input:focus,.fl textarea:focus,.fl select:focus{outline:none;border-color:var(--coral-deep);box-shadow:0 0 0 4px rgba(244,168,142,.22)}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,
.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label,
.fl select:focus+label,.fl select:valid+label{top:.5em;font-size:.72rem;font-weight:600;color:var(--coral-deep);letter-spacing:.03em}
.fl .req{color:var(--coral-deep)}
.fl-check{display:flex;align-items:center;gap:.7rem;margin-bottom:1.3rem;cursor:pointer;font-size:.95rem;color:var(--muted)}
.fl-check input{width:20px;height:20px;accent-color:var(--coral-deep);flex:none}

/* ---------- Press strip ---------- */
.press-strip{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;justify-content:center;opacity:.9}
.press-logo{font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--muted);letter-spacing:.02em;display:flex;align-items:center;gap:.5rem}
.press-logo svg{width:20px;height:20px;color:var(--coral)}

/* ---------- shake (form invalid) ---------- */
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.shake{animation:shakeX .45s var(--ease)}
.conf{position:fixed;width:9px;height:9px;border-radius:2px;z-index:600;pointer-events:none}