/* V143 — Home photography feature.
   Fixes three issues without changing Home wheel navigation or carousel timing:
   1) View More is centered against the rendered title text width.
   2) Entrance transform and hover transform live on separate elements.
   3) Entrance starts only after this Home panel becomes active (after wheel glide settles). */
.home-photography-feature{
  position:relative;
  z-index:2;
  height:100vh;
  min-height:680px;
  padding:clamp(32px,4.4vh,56px) 0 clamp(50px,6.2vh,74px);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.home-photography-feature::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 80% 42%,rgba(111,158,184,.10),transparent 32%),
    radial-gradient(circle at 14% 72%,rgba(239,140,80,.035),transparent 28%),
    linear-gradient(180deg,rgba(4,16,24,.50),rgba(4,16,24,.68));
}
.photography-feature-layout{
  position:relative;
  width:min(var(--safe),1360px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(390px,.94fr) minmax(350px,.78fr);
  gap:clamp(64px,7vw,120px);
  align-items:center;
}
.photography-feature-copy{
  width:100%;
  max-width:650px;
  justify-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}

/* One-shot staged entrance. Card stage first, then kicker → title → lead → action row. */
.photography-feature-kicker,
.photography-feature-copy h2,
.photography-feature-lead,
.photography-feature-action-row{
  opacity:0;
  filter:blur(7px);
  will-change:opacity,transform,filter;
}
.photography-feature-kicker{
  transform:translate3d(-18px,14px,0);
  transition:opacity .58s ease .24s,transform .74s cubic-bezier(.16,1,.3,1) .24s,filter .58s ease .24s;
}
.photography-feature-copy h2{
  transform:translate3d(-24px,18px,0);
  transition:opacity .66s ease .44s,transform .86s cubic-bezier(.16,1,.3,1) .44s,filter .66s ease .44s;
}
.photography-feature-lead{
  transform:translate3d(-20px,16px,0);
  transition:opacity .62s ease .68s,transform .82s cubic-bezier(.16,1,.3,1) .68s,filter .62s ease .68s;
}
.photography-feature-action-row{
  transform:translate3d(0,16px,0);
  transition:opacity .58s ease .92s,transform .78s cubic-bezier(.16,1,.3,1) .92s,filter .58s ease .92s;
}
.home-photography-feature.is-photography-feature-visible .photography-feature-kicker,
.home-photography-feature.is-photography-feature-visible .photography-feature-copy h2,
.home-photography-feature.is-photography-feature-visible .photography-feature-lead,
.home-photography-feature.is-photography-feature-visible .photography-feature-action-row{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}

.photography-feature-kicker{
  margin:0 0 22px;
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.26em;
  color:rgba(178,204,219,.72);
}
.photography-feature-copy h2{
  margin:0;
  max-width:620px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(54px,5.2vw,86px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.048em;
  color:#f7f4ef;
}
.photography-feature-lead{
  margin:clamp(22px,3vh,34px) 0 0;
  max-width:540px;
  font-size:clamp(14px,1vw,18px);
  line-height:1.7;
  letter-spacing:.01em;
  color:rgba(239,243,245,.68);
}

/* JS measures the actual rendered title glyph span and writes this custom width.
   The button therefore centers under the title, not under an arbitrary 620px box. */
.photography-feature-action-row{
  width:min(100%,var(--photo-title-visual-width,560px));
  display:flex;
  justify-content:center;
  margin-top:clamp(30px,4.2vh,46px);
}
.photography-feature-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  min-width:196px;
  min-height:54px;
  margin-top:0;
  padding:0 28px;
  border:1px solid rgba(188,209,222,.30);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(141,174,195,.17),rgba(255,255,255,.06));
  box-shadow:0 14px 34px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  color:rgba(247,249,250,.94);
  font-size:13px;
  font-weight:650;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.photography-feature-more b{font-size:18px;font-weight:400;line-height:1;transition:transform .2s ease}
.photography-feature-more:hover{
  border-color:rgba(202,222,234,.48);
  background:linear-gradient(135deg,rgba(151,187,209,.24),rgba(255,255,255,.08));
  box-shadow:0 18px 42px rgba(0,0,0,.22),0 0 26px rgba(145,195,225,.08),inset 0 1px 0 rgba(255,255,255,.15);
  transform:translateY(-2px);
}
.photography-feature-more:hover b{transform:translateX(4px)}

/* Stage owns only the one-shot entrance transform. */
.home-photography-card-stage{
  position:relative;
  justify-self:end;
  height:clamp(540px,78vh,860px);
  aspect-ratio:9 / 16;
  width:auto;
  max-width:min(42vw,485px);
  opacity:0;
  transform:translate3d(38px,28px,0) scale(.955);
  filter:blur(10px) saturate(.88);
  transition:opacity .72s ease,transform 1.02s cubic-bezier(.16,1,.3,1),filter .78s ease;
  will-change:opacity,transform,filter;
}
.home-photography-feature.is-photography-feature-visible .home-photography-card-stage{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0) saturate(1);
}

/* The card itself owns hover motion, so entrance state can no longer override it. */
.home-photography-card{
  position:relative;
  width:100%;
  height:100%;
  aspect-ratio:9 / 16;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:#071018;
  box-shadow:0 30px 76px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.055);
  cursor:pointer;
  isolation:isolate;
  transform:translate3d(0,0,0) scale(1);
  transition:transform .52s cubic-bezier(.16,1,.3,1),border-color .32s ease,box-shadow .42s ease;
  will-change:transform;
}
.home-photography-card:hover{
  transform:translate3d(0,-18px,0) scale(1.04);
  border-color:rgba(212,226,234,.34);
  box-shadow:0 48px 110px rgba(0,0,0,.52),0 0 44px rgba(145,195,225,.075),inset 0 1px 0 rgba(255,255,255,.10);
}
.home-photography-card:focus-visible{
  outline:1px solid rgba(229,239,245,.75);
  outline-offset:6px;
  transform:translate3d(0,-12px,0) scale(1.025);
}

/* Cursor-follow hint shown only while a fine pointer is over the photography card. */
.photography-card-cursor-label{
  position:fixed;
  left:0;
  top:0;
  z-index:220;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 17px;
  border:1px solid rgba(215,230,239,.30);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(45,61,72,.72),rgba(12,22,29,.56));
  box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  color:rgba(250,252,253,.96);
  font-size:12px;
  line-height:1;
  font-weight:650;
  letter-spacing:.055em;
  white-space:nowrap;
  opacity:0;
  transform:translate3d(18px,18px,0) scale(.88);
  transform-origin:left top;
  transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1);
  will-change:left,top,opacity,transform;
}
.photography-card-cursor-label.is-visible{
  opacity:1;
  transform:translate3d(18px,18px,0) scale(1);
}

/* Dedicated Home carousel: 2.5s full hold + 1.0s cross-fade. */
.home-photography-carousel{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#071018;
}
.home-photography-carousel .carousel-slide{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform:none;
  filter:saturate(.99) contrast(1.015) brightness(.97);
  transition:opacity 1s ease,filter .35s ease;
  will-change:opacity;
  -webkit-user-drag:none;
  user-select:none;
}
.home-photography-carousel .carousel-slide.is-current{
  z-index:2;
  opacity:1;
}
.home-photography-card:hover .home-photography-carousel .carousel-slide.is-current{
  filter:saturate(1.055) contrast(1.025) brightness(1.025);
}
.home-photography-carousel::before{
  content:"";
  position:absolute;
  inset:-22%;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 20%,rgba(255,255,255,.02) 33%,rgba(175,218,255,.09) 49%,rgba(255,255,255,.05) 58%,transparent 74%);
  background-size:185% 185%;
  background-position:var(--mx) var(--my);
  opacity:.28;
  filter:blur(9px) saturate(1.13);
  mix-blend-mode:screen;
  transition:opacity .6s ease;
}
.home-photography-card:hover .home-photography-carousel::before{opacity:.58}

@media(max-width:1000px){
  .photography-feature-layout{grid-template-columns:minmax(300px,.9fr) minmax(300px,.72fr);gap:clamp(38px,4.6vw,66px)}
  .home-photography-card-stage{height:clamp(500px,73vh,740px);max-width:min(43vw,420px)}
  .photography-feature-copy h2{font-size:clamp(48px,6vw,68px)}
}
@media(max-width:800px){
  .home-photography-feature{height:auto;min-height:auto;padding:82px 0 104px;display:block}
  .photography-feature-layout{grid-template-columns:1fr;gap:44px;width:min(var(--safe),620px)}
  .photography-feature-copy{justify-self:stretch;max-width:620px;text-align:left}
  .photography-feature-copy h2{font-size:clamp(48px,12vw,70px)}
  .home-photography-card-stage{justify-self:center;height:auto;width:min(78vw,410px);max-width:none;aspect-ratio:9/16}
  .home-photography-card{width:100%;height:100%}
  .showcase-next-button{position:relative;left:50%;bottom:auto;margin-top:42px;margin-bottom:-60px}
}
@media(max-width:520px){
  .home-photography-feature{padding-top:70px}
  .photography-feature-copy h2{font-size:clamp(44px,13vw,62px)}
  .photography-feature-lead{font-size:14px}
  .photography-feature-more{min-width:178px;min-height:50px;padding:0 24px}
  .home-photography-card-stage{width:min(82vw,360px)}
}

/* Keep these explicit portfolio animations available even on systems that advertise
   reduced motion; this site owner has specifically chosen this motion language. */
@media(hover:none),(pointer:coarse){
  .photography-card-cursor-label{display:none!important}
}