/* home-v2.css: home page concept (15 Oct 2026, second pass), "her worlds in one place". Loaded after v2.css and v2-plus.css.
   His notes on pass one: the worlds looked plain, the text card covered the photo, the switch flickered.
   Now: every world is a row with its own small photo; the chosen one opens up on a painted stroke in its colour with
   its line and its button; the big photo stands alone and only the paint wipe changes it. */

body.hv2 { --acc: #2E5FB8; --ink: var(--cream); --wash: rgba(18, 51, 111, .55); }
body.hv2[data-world="art"] { --acc: #E8772C; --ink: #2B0508; --wash: rgba(232, 119, 44, .32); }
body.hv2[data-world="youth"] { --acc: #F0B33A; --ink: #2B0508; --wash: rgba(240, 179, 58, .26); }

.hv2-nav .ig { margin-left: auto; }
.hv2-hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: clamp(30px, 5vw, 90px);
  padding: clamp(96px, 12vh, 130px) var(--gutter) clamp(36px, 5vh, 60px); overflow: hidden; isolation: isolate; }
.hv2-hero::before { content: ""; position: absolute; z-index: -1; right: -10%; top: 5%; width: 75%; height: 95%; background: radial-gradient(closest-side, var(--wash), transparent 75%); transition: background .8s; }

.hv2-eb { display: block; margin-bottom: 14px; }
.hv2-name { margin: 0 0 clamp(20px, 3vh, 34px); font-size: clamp(60px, 7.6vw, 128px); line-height: .86; }
.hv2-name i { display: block; font-size: .62em; color: var(--cream-2); }

/* the worlds */
.hv2-worlds { display: grid; gap: 10px; max-width: 540px; }
.world { position: relative; isolation: isolate; }
.world .w { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 10px 16px 10px 10px; text-align: left; color: var(--cream); cursor: pointer;
  border: 1px solid rgba(243, 231, 214, .16); border-radius: 6px; background: rgba(243, 231, 214, .04); transition: border-color .4s, background .4s, color .4s; }
.world .w:hover { border-color: rgba(243, 231, 214, .4); background: rgba(243, 231, 214, .08); }
.world .th { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(243, 231, 214, .25); transition: box-shadow .4s, transform .5s var(--ease); }
.world .th img { width: 100%; height: 100%; object-fit: cover; }
.world .k { display: block; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-2); margin-bottom: 6px; transition: color .4s; }
.world .t { display: block; font: 700 clamp(26px, 2.6vw, 38px)/1 var(--serif); }
.world .ar { font: 400 22px/1 var(--sans); opacity: .5; transition: transform .4s var(--ease), opacity .4s; }
.world .w:hover .ar { transform: translateX(4px); opacity: 1; }
/* the chosen world: a painted stroke in its colour behind it */
.world::before { content: ""; position: absolute; z-index: -1; inset: -10px -18px -12px -14px; background: var(--acc);
  -webkit-mask-image: url("../img/ui/edge-3.png"); mask-image: url("../img/ui/edge-3.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  opacity: 0; transform: scaleX(.6); transform-origin: 0 50%; transition: opacity .45s, transform .7s var(--ease), background .6s; }
.world.on::before { opacity: 1; transform: none; }
.world.on .w { border-color: transparent; background: transparent; color: var(--ink); }
.world.on .k { color: var(--ink); opacity: .8; }
.world.on .t { font-style: italic; }
.world.on .th { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.06); }
.world.on .ar { opacity: 0; }
/* its line and its button open below the row (height animates: no jump, no flicker) */
.wmore { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.wmore > div { overflow: hidden; min-height: 0; padding: 0 16px 0 88px; }
.world.on .wmore { grid-template-rows: 1fr; }
.wmore p { margin: 2px 0 12px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.wmore .btn-o { border-color: var(--ink); color: var(--ink); min-height: 44px; padding-top: 0; padding-bottom: 0; }
.wmore .btn-o:hover { background: var(--ink); color: var(--acc); }
.wmore .bar { display: block; height: 2px; margin: 14px 0 12px; background: rgba(43, 5, 8, .18); overflow: hidden; }
body.hv2[data-world="music"] .wmore .bar { background: rgba(243, 231, 214, .25); }
.wmore .bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.hv2-worlds .soon { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 4px 0; font: italic 400 15px/1.3 var(--serif); color: var(--cream-2); }

/* the big photo */
.hv2-frame { position: relative; aspect-ratio: 1 / 1; max-height: 82svh; margin-left: auto; }
.hv2-frame .p { position: absolute; inset: 0; margin: 0; visibility: hidden; }
.hv2-frame .p.on { visibility: visible; }
.hv2-frame .p img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: url("../img/ui/edge-2.png"); mask-image: url("../img/ui/edge-2.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.hv2-frame .p[data-w="youth"] img { object-position: 60% 40%; }
.hv2-frame .p[data-w="art"] img { object-position: 50% 30%; }

@media (max-width: 899px) {
  /* phones: name, the photo, then the worlds */
  .hv2-hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 88px; align-content: start; min-height: 0; }
  .hv2-side { display: contents; }
  .hv2-eb { order: 1; } .hv2-name { order: 2; } .hv2-stage { order: 3; } .hv2-worlds { order: 4; }
  .hv2-name { font-size: clamp(54px, 16vw, 96px); margin-bottom: 16px; }
  .hv2-frame { aspect-ratio: 4 / 3.4; max-height: none; width: 100%; margin-bottom: 18px; }
  .hv2-worlds { max-width: none; gap: 8px; }
  .world .w { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 8px 12px 8px 8px; }
  .world .th { width: 52px; height: 52px; }
  .world .t { font-size: 25px; }
  .wmore > div { padding: 0 12px 0 72px; }
  .hv2-worlds .soon { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .world::before, .wmore, .world .th, .hv2-hero::before { transition: none; } }

/* ---------- pass 3 (15 Oct): real paint instead of flat colour, a richer ground ---------- */
.hv2-hero::before { display: none; } /* the flat colour wash is replaced by the paint sweep below */
/* a big soft sweep of the chosen world's paint behind the photo; each world has its own layer that fades */
.hv2-sweep { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.hv2-sweep i { position: absolute; right: -8%; top: 22%; width: 74%; height: 58%; background: center / cover no-repeat; transform: rotate(-9deg);
  -webkit-mask-image: url("../img/ui/edge-3.png"); mask-image: url("../img/ui/edge-3.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  opacity: 0; transition: opacity 1.1s ease; }
.hv2-sweep i.on { opacity: .42; }
.hv2-sweep i[data-w="music"] { background-image: url("../img/ui/paint-blue.webp"); }
.hv2-sweep i[data-w="art"] { background-image: url("../img/ui/paint-orange.webp"); }
.hv2-sweep i[data-w="youth"] { background-image: url("../img/ui/paint-gold.webp"); }
/* every world's own paint on its stroke (no shared layer, so nothing swaps mid-switch) */
.world[data-w="music"] { --acc: #2E5FB8; --ink: var(--cream); }
.world[data-w="art"] { --acc: #E8772C; --ink: #2B0508; }
.world[data-w="youth"] { --acc: #F0B33A; --ink: #2B0508; }
.world::before { background: var(--acc) center / cover no-repeat; box-shadow: none; }
.world[data-w="music"]::before { background-image: linear-gradient(90deg, rgba(18, 51, 111, .35), rgba(18, 51, 111, 0) 70%), url("../img/ui/paint-blue.webp"); }
.world[data-w="art"]::before { background-image: linear-gradient(90deg, rgba(255, 236, 214, .22), rgba(255, 236, 214, 0) 70%), url("../img/ui/paint-orange.webp"); }
.world[data-w="youth"]::before { background-image: linear-gradient(90deg, rgba(255, 246, 222, .25), rgba(255, 246, 222, 0) 70%), url("../img/ui/paint-gold.webp"); }
/* the words stay crisp on the paint */
.world[data-w="music"].on .t, .world[data-w="music"].on .wmore p, .world[data-w="music"].on .k { text-shadow: 0 1px 8px rgba(8, 20, 50, .75); }
.world[data-w="art"].on .t, .world[data-w="youth"].on .t, .world[data-w="art"].on .wmore p, .world[data-w="youth"].on .wmore p { text-shadow: 0 1px 6px rgba(255, 240, 220, .55); }
.world.on .wmore p { font-weight: 500; }
@media (max-width: 899px) { .hv2-sweep i { right: -30%; top: 30%; width: 120%; height: 30%; } }
@media (prefers-reduced-motion: reduce) { .hv2-sweep i { transition: none; } }
/* a little more light under the dark words on orange and gold (the small label was faint) */
.world[data-w="art"]::before { background-image: linear-gradient(90deg, rgba(255, 236, 214, .42), rgba(255, 236, 214, .12) 75%), url("../img/ui/paint-orange.webp"); }
.world[data-w="youth"]::before { background-image: linear-gradient(90deg, rgba(255, 246, 222, .4), rgba(255, 246, 222, .1) 75%), url("../img/ui/paint-gold.webp"); }
.world.on .k { font-weight: 600; opacity: 1; }

/* ---------- pass 4 (15 Oct, his picks): the "colour mist" background; no paint sweep behind the photos ---------- */
/* v2.css gives <html> its own colour, so the page background goes on <html> (a layer under <body> would never show) */
html { background-color: #1a0510; background-attachment: fixed;
  background-image: radial-gradient(38% 42% at 82% 30%, rgba(46, 95, 184, .45), transparent 70%),
                    radial-gradient(30% 36% at 60% 90%, rgba(232, 119, 44, .32), transparent 70%),
                    radial-gradient(26% 30% at 20% 75%, rgba(240, 179, 58, .18), transparent 70%),
                    radial-gradient(50% 60% at 15% 10%, rgba(120, 18, 40, .55), transparent 70%),
                    linear-gradient(150deg, #2a0610 0%, #1a0514 45%, #0d0b24 100%); }
body.hv2.painted { background: transparent; }
.hv2-sweep { display: none; }
.home-contact { background: rgba(20, 3, 10, .55); }

/* ---------- her intro under the name (his rewrite of her bio, 15 Oct) ---------- */
.hv2-name { margin-bottom: 16px; }
.hv2-intro { margin: 0 0 clamp(18px, 2.6vh, 28px); max-width: 48ch; font: 400 clamp(15px, 1.1vw, 17px)/1.6 var(--sans); color: rgba(243, 231, 214, .88); }
@media (min-width: 900px) and (max-height: 860px) { .hv2-name { font-size: clamp(56px, 6.4vw, 104px); } .hv2-worlds { gap: 6px; } }
@media (max-width: 899px) {
  .hv2-intro { order: 3; margin-bottom: 20px; }
  .hv2-stage { order: 4; } .hv2-worlds { order: 5; }
}
/* short laptop screens (768-820 px tall): everything still fits on the first screen */
@media (min-width: 900px) and (max-height: 820px) {
  .hv2-hero { padding-top: 84px; padding-bottom: 24px; }
  .hv2-eb { display: none; }
  .hv2-name { font-size: 64px; margin-bottom: 10px; }
  .hv2-intro { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
  .world .w { padding-top: 6px; padding-bottom: 6px; grid-template-columns: 50px minmax(0, 1fr) auto; }
  .world .th { width: 50px; height: 50px; }
  .world .t { font-size: 26px; }
  .wmore > div { padding-left: 76px; }
  .wmore p { margin-bottom: 8px; font-size: 15px; }
  .wmore .bar { margin: 10px 0 8px; }
}

/* ---------- pass 5 (18 Oct, Felisha approved): her picture behind the first screen ----------
   The old ChatGPT home picture with its painted text removed (img/home/bg-her-*.webp). It belongs to the first
   screen only, not a fixed page background: iPhone Safari ignores background-attachment: fixed and would zoom it.
   Computers: the photo frame is smaller and lower so her face shows above it. Phones: her face gets the top. */
.hv2-hero { isolation: isolate; }
.hv2-hero::after { content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(24,4,12,.82) 0%, rgba(24,4,12,.5) 36%, rgba(24,4,12,0) 58%),
              linear-gradient(0deg, #1a0510 0%, rgba(26,5,16,0) 16%),
              url("../img/home/bg-her-wide.webp") 50% 0 / cover no-repeat; }
@media (min-width: 900px) {
  .hv2-stage { align-self: end; padding-bottom: 5vh; }
  .hv2-frame { max-height: 52svh; width: min(100%, 52svh); }
}
@media (max-width: 899px) {
  .hv2-hero { padding-top: 64vw; }
  .hv2-hero::after { background: linear-gradient(180deg, rgba(26,5,16,0) 0, rgba(26,5,16,0) 34vw, rgba(24,4,12,.72) 68vw, rgba(24,4,12,.8) 160vw, #1a0510 199vw),
              url("../img/home/bg-her-phone.webp") 50% 0 / 100% auto no-repeat; }
}