/* OUTBOX Contact V5 · cinematic amber aurora + frosted glass
   Based on the submitted StyleMe login video: diffuse light field, translucent
   glass and softly illuminated inputs. Never changes the page's brand colors.
   Scoped to contact; layered after V2/V3/V4 for easy rollback. */
#contact.oc-contact-v2{
  background:#242424;
}
#contact .oc-contact-panel{
  background:
    radial-gradient(ellipse 52% 78% at 75% 55%,rgba(251,175,42,.055),transparent 80%),
    linear-gradient(116deg,#3f3f3f 0%,#343434 47%,#292929 100%);
}
#contact .oc-contact-form-wrap{
  --oc-aurora-x:50%;
  --oc-aurora-y:45%;
  --oc-spot-x:50%;
  --oc-spot-y:10%;
  perspective:1300px;
  isolation:isolate;
  overflow:visible;
  position:relative;
  min-height:0;
}
#contact .oc-contact-aurora{
  position:absolute;
  inset:-56px -52px;
  z-index:0;
  border-radius:36%;
  pointer-events:none;
  opacity:.88;
  background:
    radial-gradient(ellipse 59% 56% at var(--oc-aurora-x) var(--oc-aurora-y),
      rgba(251,175,42,.22) 0%,
      rgba(251,175,42,.11) 31%,
      rgba(235,125,21,.055) 57%,
      transparent 82%),
    radial-gradient(ellipse 53% 75% at 72% 50%,
      rgba(251,175,42,.08) 0%,transparent 75%);
  filter:blur(35px);
  transform:translateZ(0);
  will-change:background;
}
#contact .oc-contact-aurora::after{
  content:"";position:absolute;inset:7% 9%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(251,175,42,.048),transparent 65%);
  filter:blur(26px);
  animation:ocAuroraBreathe 10s ease-in-out infinite alternate;
}
@keyframes ocAuroraBreathe{
  from{transform:scale(.93);opacity:.52}
  to{transform:scale(1.07);opacity:1}
}
#contact .oc-contact-form{
  position:relative;
  z-index:1;
  isolation:isolate;
  transform-origin:center center;
  backface-visibility:hidden;
  will-change:transform;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  background:
    radial-gradient(420px circle at var(--oc-spot-x) var(--oc-spot-y),
      rgba(251,175,42,.064),transparent 74%),
    linear-gradient(148deg,
      rgba(62,61,60,.82) 0%,
      rgba(31,31,32,.81) 40%,
      rgba(19,19,21,.83) 100%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(120%);
  backdrop-filter:blur(28px) saturate(120%);
  box-shadow:
    0 30px 85px rgba(0,0,0,.38),
    0 0 55px rgba(251,175,42,.044),
    inset 0 1px rgba(255,255,255,.16);
}
#contact .oc-contact-form::before{
  left:16px;right:16px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.47) 37%,rgba(251,175,42,.55) 72%,transparent);
}
#contact .oc-form-overline{
  margin-bottom:12px;
  color:#FBAF2A;
}
#contact .oc-input-group{
  isolation:isolate;
  border-radius:11px;
}
#contact .oc-input-group::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:12px;
  background:linear-gradient(120deg,rgba(255,255,255,.18),rgba(255,255,255,.025) 44%,rgba(251,175,42,.08));
  pointer-events:none;
  opacity:.36;
  transition:opacity .32s ease;
}
#contact .oc-input-group:focus-within::before{opacity:1}
#contact .oc-input-group .oc-field{
  height:66px;
  border-radius:11px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:linear-gradient(120deg,rgba(255,255,255,.105),rgba(255,255,255,.055))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
  color:#F9F8F5!important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:background .28s,border-color .28s,box-shadow .28s!important;
}
#contact .oc-input-group textarea.oc-field{
  min-height:163px;height:163px;
}
#contact .oc-input-group:hover .oc-field:not(:focus){
  background:linear-gradient(120deg,rgba(255,255,255,.125),rgba(255,255,255,.07))!important;
  border-color:rgba(255,255,255,.30)!important;
}
#contact .oc-input-group .oc-field:focus{
  background:linear-gradient(120deg,rgba(251,175,42,.09),rgba(255,255,255,.09))!important;
  border-color:rgba(251,175,42,.74)!important;
  box-shadow:0 0 0 3px rgba(251,175,42,.10),inset 0 1px rgba(255,255,255,.07)!important;
}
#contact .oc-input-group .oc-field:-webkit-autofill{
  -webkit-text-fill-color:#F9F8F5!important;
  -webkit-box-shadow:0 0 0 1000px #383736 inset!important;
  caret-color:#FBAF2A!important;
}
#contact .oc-input-group .oc-field:placeholder-shown:not(:focus)+.oc-floating-label{
  color:#D3D0CF;
}
#contact .oc-input-group .oc-field-icon{
  stroke:#D0CECB;
}
#contact .oc-input-group:focus-within .oc-field-icon{
  stroke:#FBAF2A;
}
#contact .oc-contact-form .oc-form-send{
  min-height:59px;
  border-radius:9px!important;
  background:#FBAF2A!important;
  border-color:#FBAF2A!important;
  box-shadow:0 11px 28px rgba(251,175,42,.17);
}
#contact .oc-contact-form .oc-form-send:hover:not(:disabled){
  background:#FFC454!important;
  border-color:#FFC454!important;
  box-shadow:0 17px 39px rgba(251,175,42,.30);
}
#contact .oc-edge-glow{
  border-radius:inherit;
}
#contact .oc-contact-form:focus-within > .oc-edge-glow{
  opacity:.80;
}
@media(max-width:780px){
  #contact .oc-contact-aurora{
    inset:-32px -27px;
    filter:blur(30px);
    opacity:.75;
  }
  #contact .oc-contact-form{
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }
}
@media(max-width:470px){
  #contact .oc-contact-aurora{inset:-24px -13px;filter:blur(26px);opacity:.63}
  #contact .oc-contact-form{border-radius:15px!important}
  #contact .oc-input-group .oc-field{height:62px}
  #contact .oc-input-group textarea.oc-field{min-height:145px;height:145px}
}
@media(prefers-reduced-motion:reduce){
  #contact .oc-contact-form{transform:none!important;will-change:auto}

  #contact .oc-contact-aurora::after{animation:none}
  #contact .oc-contact-aurora{will-change:auto}
  #contact .oc-input-group::before,
  #contact .oc-input-group .oc-field{transition:none!important}
}
