/*
 * Shared technical refinements for the SOLUSJEAN working site.
 * The editorial design stays in each page; this file only adds behavior,
 * accessibility and responsive guardrails.
 */

html,body{width:100%;max-width:100%;overflow-x:clip}
img,video,iframe{max-width:100%}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid currentColor!important;
  outline-offset:4px!important;
}

button:disabled,[aria-disabled="true"]{cursor:not-allowed!important}
[role="dialog"]{overscroll-behavior:contain}

/* Public pages never expose editor placeholders. Gear cards return
   automatically as soon as a real image fills their image-slot. */
section[data-screen-label="Gear"] article:has(image-slot:not([data-filled])){display:none!important}
section[data-screen-label="Gear"]:not(:has(image-slot[data-filled])){display:none!important}

/* The two home pages are literal visual mirrors. One solid destination-colour
   layer dissolves between them without shifting, scaling or masking layout. */
.sj-mirror-fallback{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
  opacity:0;
  transition:opacity 140ms cubic-bezier(.4,0,1,1);
}
.sj-mirror-fallback[data-active="true"]{opacity:1}

/* The Photo/Cinema control is the entrance to the mirrored experience.
   On desktop it occupies the exact midpoint between the brand and navigation;
   on small screens it becomes a centred third header row. */
.sj-side-cta{
  position:absolute;
  z-index:20;
  top:50%;
  left:50%;
  display:block;
  width:max-content;
  max-width:calc(100% - 24px);
  transform:translate(-50%,-50%);
  text-align:center;
}
.sj-side-cta--photo{
  --sj-switch-bg:#181817;
  --sj-switch-fg:#F7F5F2;
  --sj-switch-border:#181817;
  --sj-switch-cue:#C9C6C0;
  --sj-switch-halo:rgba(247,245,242,.3);
  --sj-switch-shadow:rgba(20,20,18,.34);
  --sj-switch-sheen:rgba(255,255,255,.22);
}
.sj-side-cta--cinema{
  --sj-switch-bg:#F1EFEB;
  --sj-switch-fg:#111110;
  --sj-switch-border:#F1EFEB;
  --sj-switch-cue:#A9A69F;
  --sj-switch-halo:rgba(237,235,231,.4);
  --sj-switch-shadow:rgba(0,0,0,.5);
  --sj-switch-sheen:rgba(17,17,16,.09);
}
.sj-side-cta__cue{
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--sj-switch-cue);
  font-size:7.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:.34em;
  white-space:nowrap;
  transform:translateX(-50%);
  animation:sjSwitchCue 3s ease-in-out infinite;
}
.sj-side-cta__dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.sj-side-cta__signal{position:relative;display:inline-flex;width:188px}
.sj-side-cta__signal::before{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid var(--sj-switch-halo);
  border-radius:4px;
  pointer-events:none;
  animation:sjSwitchHalo 2.7s cubic-bezier(.22,1,.36,1) infinite;
}
.sj-side-cta__button{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:44px;
  box-sizing:border-box;
  overflow:hidden;
  padding:11px 20px;
  border:1px solid var(--sj-switch-border);
  border-radius:2px;
  color:var(--sj-switch-fg)!important;
  background:var(--sj-switch-bg);
  box-shadow:0 18px 30px -17px var(--sj-switch-shadow),0 4px 10px -7px var(--sj-switch-shadow);
  font-size:9.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:.26em;
  white-space:nowrap;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,filter .35s ease;
}
.sj-side-cta__button::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-30% -45%;
  background:linear-gradient(105deg,transparent 36%,var(--sj-switch-sheen) 48%,var(--sj-switch-sheen) 52%,transparent 64%);
  transform:translateX(-115%);
  animation:sjSwitchSheen 4.6s cubic-bezier(.4,0,.2,1) infinite 1s;
  pointer-events:none;
}
.sj-side-cta__button>span{position:relative;z-index:1}
.sj-side-cta__icon{font-size:13px;letter-spacing:0}
.sj-side-cta__button:hover{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 24px 36px -17px var(--sj-switch-shadow),0 7px 14px -8px var(--sj-switch-shadow);
  filter:contrast(1.06);
}
.sj-side-cta__button:active{transform:translateY(0) scale(.985)}
.sj-side-cta__button:focus-visible{outline-color:var(--sj-switch-cue)!important}
@keyframes sjSwitchCue{
  0%,100%{opacity:.52}
  50%{opacity:1}
}
@keyframes sjSwitchHalo{
  0%{opacity:0;transform:scale(.94)}
  28%{opacity:.8}
  100%{opacity:0;transform:scale(1.13)}
}
@keyframes sjSwitchSheen{
  0%,62%{transform:translateX(-115%)}
  86%,100%{transform:translateX(115%)}
}

/* The reveal instruction belongs to the hero image and shares the same
   centre axis as the Photography/Cinematography switch above it. */
[data-reveal-hint]{
  top:clamp(10px,1.4vw,18px)!important;
  right:auto!important;
  bottom:auto!important;
  left:50%!important;
  width:calc(100% - 24px)!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;
  font-size:clamp(6px,.58vw,8px)!important;
  line-height:1.35!important;
  letter-spacing:clamp(.18em,.28vw,.34em)!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/* Mobile keeps the same hierarchy and visual language, but lets the header
   breathe across compact rows instead of widening the document. */
@media (max-width:720px){
  #desk a,#desk button{touch-action:manipulation}

  [data-screen-label="Hero card"]{
    animation-duration:1.15s!important;
    animation-delay:0s!important;
    animation-timing-function:cubic-bezier(.22,.78,.2,1)!important;
  }
  [data-hero-cam]{
    animation-duration:1.25s!important;
    animation-delay:0s!important;
    animation-timing-function:cubic-bezier(.22,.78,.2,1)!important;
  }
  [data-hero-title]{
    left:12px!important;
    bottom:-18px!important;
    max-width:calc(100% - 24px)!important;
    box-sizing:border-box!important;
    padding:11px 14px!important;
    animation-duration:.9s!important;
    animation-delay:.12s!important;
  }
  [data-hero-title]>p{
    margin-bottom:6px!important;
    font-size:7px!important;
    letter-spacing:.28em!important;
  }
  [data-hero-title]>h1{
    font-size:24px!important;
    letter-spacing:.1em!important;
  }
  [data-reveal-hint]{
    top:10px!important;
    right:auto!important;
    bottom:auto!important;
    left:50%!important;
    width:calc(100% - 16px)!important;
    transform:translateX(-50%)!important;
    font-size:6px!important;
    line-height:1.45!important;
    letter-spacing:.18em!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  #desk>header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:start!important;
    align-items:start!important;
    gap:14px!important;
  }
  #desk>header>nav{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:10px 16px!important;
    font-size:9.5px!important;
    letter-spacing:.2em!important;
  }
  #desk>header>nav>a,
  header[data-sj-wrap]>nav>a,
  footer[data-sj-wrap] nav>a{min-height:44px;display:inline-flex!important;align-items:center}
  header[data-sj-wrap]>nav{flex-wrap:wrap!important}
  .sj-side-cta{
    position:relative;
    top:auto;
    left:auto;
    grid-row:3;
    justify-self:center;
    margin-top:14px;
    transform:none;
  }
  .sj-side-cta__button{min-height:44px;padding:11px 17px;font-size:9px;letter-spacing:.22em}
  .sj-side-cta__cue{font-size:7px;letter-spacing:.28em}

  footer[data-sj-wrap]{
    align-items:flex-start!important;
    flex-direction:column!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  footer[data-sj-wrap] nav{max-width:100%;flex-wrap:wrap!important;gap:14px 20px!important}
  footer[data-sj-wrap] nav{width:100%!important;box-sizing:border-box!important;justify-content:flex-start!important}
  footer[data-sj-wrap] nav>a{letter-spacing:.2em!important}

  /* Photography Selected Work: a compact two-column editorial mosaic on
     phones. Original proportions stay intact, so no grey letterboxing is
     needed around portrait or landscape frames. */
  #work [data-grid]{
    display:block!important;
    column-count:2!important;
    column-gap:10px!important;
  }
  #work [data-grid]>div{
    display:inline-block!important;
    width:100%!important;
    min-width:0!important;
    margin-bottom:10px!important;
    vertical-align:top!important;
  }
  #work [data-grid]>div:nth-child(n+5){display:none!important}
  #work [data-grid]>div>div{background:transparent!important}

  /* Empty floating Cinema frames stay visible as a compact completion
     checklist on small screens. Filled decorative floats still follow the
     original mobile composition rules. */
  [data-sheet] [data-float]:has(image-slot:not([data-filled])){
    display:block!important;
    position:static!important;
    width:min(220px,100%)!important;
    margin:18px auto!important;
    transform:none!important;
  }

  /* Home biography remains available on small screens instead of being
     lost with the decorative floating photographs. */
  [data-sheet]>div:first-child{display:flex;flex-direction:column}
  [data-sheet]>div:first-child>div:not([data-float]){order:1}
  [data-sheet] [data-float-id="f7"]{
    display:block!important;
    order:2;
    position:static!important;
    width:auto!important;
    margin:0!important;
    transform:none!important;
  }
  [data-sheet] [data-float-id="f7"]>div{
    border-radius:0 0 12px 12px!important;
    box-shadow:none!important;
  }

  /* Store: one centred card at a time. The desktop 3D composition is kept
     intact at larger sizes; touch uses swipe/arrows with full-size targets. */
  [data-store-stack]{
    height:660px!important;
    perspective:none!important;
    overflow:visible!important;
  }
  [data-store-card]{
    top:20px!important;
    width:min(430px,calc(100% - 8px))!important;
    min-height:0!important;
    transform:translateX(-50%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    filter:none!important;
  }
  [data-store-card][data-product-state="active"]{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  [data-store-media]{min-height:220px!important;touch-action:pan-y!important;cursor:default!important}
  [data-store-actions]>*{min-height:44px!important;display:flex!important;align-items:center;justify-content:center}
  [data-store-index] button{min-height:44px}
  [data-screen-label="Portfolio intro"] button,
  [data-screen-label="Store intro"] button{min-height:44px}
  [data-store-desktop-hint]{display:none!important}
  [data-store-mobile-hint]{display:inline!important}

  [data-screen-label="Contact"] a{overflow-wrap:anywhere}
  [data-screen-label="Contact"] div[style*="justify-content:space-between"]{flex-wrap:wrap!important}
}

@media (min-width:721px){[data-store-mobile-hint]{display:none!important}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Shared bilingual control */
.sj-language-toggle {
  appearance: none;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  opacity: .72;
  transition: opacity .28s ease, transform .4s cubic-bezier(.16,.72,.16,1), background-color .28s ease;
}

.sj-language-toggle:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.sj-language-toggle:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .sj-language-toggle {
    min-height: 44px;
    padding-inline: 12px;
    font-size: 8.5px;
  }
}